对于图像，我有3个字段的第一个input for image titleselect for year和input type file。但我想在按下update按钮时检查图像标题插入与否。我正在使用表单验证，但它不起作用。
我的代码：
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<div class="content-wrapper">
<section class="content-header">
<h1><u>Heading </u></h1>
<ol class="breadcrumb">
<li><a href="#"><i class="fa fa-home"></i> Home Content</a></li>
<li class="active"> Topic </li>
</ol>
</section>
<section class="content">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 col-lg-12">
<h3 class="page-header"></h3>
</div>
<div class="col-lg-offset-1 col-md-12 col-sm-12 col-xs-12 col-lg-10">
<div class="col-md-12">
<div class="box box-primary">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Add Gallary Images</h3>
<div class="box-tools pull-right">
<button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body">
<form id="add_gallary_form" method="post">
<div class="form-group">
<label>Image Title</label>
<input type="text" class="form-control" name="img_title" id="img_title" placeholder="Enter your Image Title" dir="" autocomplete="off" required>
</div>
<div class="form-group">
<label>Year</label>
<select class="form-control" name="year" id="year" required>
<?php
foreach(range(1950, (int)date("Y")) as $year) {
echo "t<option value='".$year."'>".$year."</option>nr";
}
?>
</select>
</div>
<div class="form-group">
<label>Image</label>
<input type="file" id="upload_image" name="upload_image" class="col-md-8 form-control" multiple />
<div class="form-group">
<div class="col-md-12" id="uploaded_images" ></div>
</div>
</div>
<div class="box-footer">
<button type="submit" id="btn-insert" class="btn btn-success col-lg-8 col-md-offset-2">Insert</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="<?php echo base_url();?>assets/admin/assets/jquery/jquery-3.2.1.min.js"></script>
<script src="<?php echo base_url();?>assets/admin/bootstrap/js/bootstrap.min.js"></script>
<script src="<?php echo base_url();?>assets/admin/plugins/fastclick/fastclick.js"></script>
<script src="<?php echo base_url();?>assets/admin/dist/js/app.min.js"></script>
<script src="<?php echo base_url();?>assets/admin/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<script src="<?php echo base_url();?>assets/admin/dist/js/demo.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>assets/admin/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script>
$("#add_gallary_form").validate({
rules:{
"img_title":{
required: true,
},
},
messages:{
"img_title":{
required: "Please Enter Image Title",
},
},
});
</script>
<script type="text/javascript">
$("#btn-insert").click(function(e){
e.preventDefault();
var img_title = $('#img_title').val();
var year = $('#year').val();
if ( $('#upload_image').val() =='') {
alert("Please Select Image File");
}else{
var files = $('#upload_image')[0].files;
var error = '';
var formData=new FormData();
formData.append('img_title',img_title);
formData.append('year',year);
for (var count = 0; count <files.length; count++) {
var name = files[count].name;
var extension = name.split('.').pop().toLowerCase();
if (jQuery.inArray(extension,['gif','png','jpg','jpeg'])== -1) {
error += "Invalid " + count +" Image File "
}else{
formData.append("files[]",files[count]);
}
}
if (error=='') {
$.ajax({
url: "<?php echo base_url();?>admin_controllers/WebsiteContentController/insertImage",
type: "POST",
data: formData,
contentType:false,
cache:false,
processData:false,
beforeSend: function(){
$('#uploaded_images').html("<div style='margin: auto; text-align: center;'><img src='<?php echo base_url();?>/assets/images/uploads/loader.gif'><label class='text-success' align='center'>Uploading...</label></div>");
},
success: function(data)
{
$('#uploaded_images').html(data);
alert('Image successfully added')
setTimeout(function(){location.reload();},1000);
}
});
}else{
alert(error);
}
}
});
</script>
我的数据是直接插入的，无需检查表单验证。我不知道我的代码哪里错了。如何验证我的图像标题。
在该var img_title = $('#img_title').val();下方添加以下代码
if(img_title=="")
{
alert("Enter Image title");
return false;
}
您可以在btn发送按钮单击事件中进行验证。
当你点击提交按钮时试试这个，它可以
<script type="text/javascript">
$(function () {
$("#btn-insert").click(function () {
var img = $('#img_title').val();
if(img == ""){
alert("Enter the image name");
return false;
}
return true;});
});
</script>
使用此代码，将检查img_title变量是否为空，也检查未定义。
我希望它对你有效
if(img_title)
{
alert("Enter Image title");
return false;
}