user1611183 user1611183 - 1 month ago 15
jQuery Question

bootstrap-combobox (by Daniel Farrel) and jquery-validaiton-plugin

Has anyone made the jquery.validate plugin working with the bootstrap-combobox created by Daniel Farrel ?

The jquery.validate plugin works pretty well with the remaining bootstrap elements, but can't get it working with the bootstrap-combobox.

Here is the html :

<div class="row">
<div class="col-sm-4">
<label for="categoryParent" class="control-label">Category</label>
</div>
<div class="col-sm-8">
<select id="categoryParent" name="categoryParent" class="combobox form-control">
<option value="" selected="selected">Select the category</option>
<option>...</option>

</select>
</div>
</div>


and the js :

$.validator.setDefaults({
highlight: function(element) {
$(element).closest('.row').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.row').removeClass('has-error');
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
error.insertAfter(element);
}
});

$("#addProductForm").validate({
rules: {
categoryParent: {required: true}
},
messages: {
categoryParent : "Category required"

},
invalidHandler: function() {
$("#cc-alert").css("display","block");
},
submitHandler: function() {

//
// more code
//


return false;
}

Answer

Bootstrap ComboBox hides the original select and replaces it with something more visually appealing. However, the jQuery Validate plugin can only validate the original select element, but will also ignore it because it is hidden.

You simply have to use the ignore option to tell it to validate hidden elements.

ignore: []  // ignore nothing, validate everything

In your code:

$("#addProductForm").validate({
    ignore: [],
    rules: { ....

OR:

$.validator.setDefaults({
    ignore: [],
    highlight: function(element) { ....