1

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;
        }
Sparky
  • 98,165
  • 25
  • 199
  • 285
user1611183
  • 311
  • 1
  • 5
  • 12

1 Answers1

1

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) { ....
Community
  • 1
  • 1
Sparky
  • 98,165
  • 25
  • 199
  • 285
  • 1
    It worked at the first attempt! Thanks a lot, you saved my day. – user1611183 Nov 06 '16 at 16:53
  • any idea how can i remove the "errorClass" :) ? it remains there once the field (combobox) is validated. Whereas it hides correctly with the other fields. – user1611183 Nov 06 '16 at 17:25
  • @user1611183, the classes are added/removed using the `highlight` and `unhighlight` options. You'll have to customize these functions for your ComboBox element. – Sparky Nov 06 '16 at 18:18