我在使用JQuery Validation插件突出显示bootstrap中的错误时遇到了一些问题。它在正常输入时工作得很好,但是当我使用select和file type元素时,错误突出显示没有显示。它仅在我单击浏览文件类型并尝试在选择类型上选择某个选项时显示。这是我的表格:
<!-- form start -->
<form class="form-horizontal" id="saveForm" method="get" action="" >
<div class="box-body">
<div class="form-group">
<label for="nama" class="col-sm-2 control-label">Nama</label>
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Your full name" name="nama" minlength="2" required>
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="email" placeholder="Your Email" required>
</div>
</div>
<div class="form-group">
<label for="exampleInputFile" class="col-sm-2 control-label">Images</label>
<div class="col-sm-10">
<input type="file" id="images" required>
</div>
</div>
<div class="form-group">
<label for="tipe" class="col-sm-2 control-label">User Type</label>
<div class="col-sm-10">
<select id="tipe" class="form-control" required>
<option value="">Please select user type</option>
<option value="admin">Admin</option>
<option value="member">Member</option>
<option value="publisher">Publisher</option>
</select>
</div>
</div>
</div>
<!-- /.box-body -->
<div class="box-footer">
<button type="submit" class="btn btn-default">Cancel</button>
<button type="submit" class="btn btn-info pull-right">Save</button>
</div>
<!-- /.box-footer -->
</form>
这是我的Jquery代码:
$.validator.setDefaults({
submitHandler: function() {
alert("submitted!");
},
highlight: function(element) {
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
$().ready(function() {
// validate the comment form when it is submitted
$("#saveForm").validate({
rules: {
nama: {
minlength: 2,
required: true
},
email: {
email: true,
required: true
},
tipe: {
required: true,
minimum: 1
},
images: {
required: true
}
}
});
});