Bootstrap select Plugin Not work With jQuery Validation

Question

I design my HTML selectbox using bootstrap select plugin. Now, i add jQueryvalidation Plugin for validate my form But, Validation form not work with bootstrap select plugin.

DEMO HERE

HTML:

<form id="myform">
    <select name="year" class="selectpicker">
        <option value="">Year</option>
        <option value="1">1955</option>
        <option value="2">1956</option>
    </select>
    <br/>
    <input type="submit" />
</form>

JS:

$(document).ready(function () {
$('select').selectpicker();
    $('#myform').validate({ // initialize the plugin
        rules: {
            year: {
                required: true,
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

});

NOTE: For check this conflict, remove Line 2 from JS, jQuery Validation Worked.

EDIT: adeneo Fix Problem Using ignore[] method : FIDDLE

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "year") {
          error.insertAfter(".bootstrap-select");
        } else {
          error.insertAfter(element);
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

Now This Worked but I have New Problem: In normal Validation after select fields, error message This field is required auto Hide( OR with add any css, show success message) but Now, error message is show after fix required field. in act: when we choose years, error message not hide.

How do fix This?

Answer 1

The select plugin hides the original select and creates a new one with an unordered list that updates the hidden selects value, but hidden elements are not validated by default by the validation plugin, you have to use the ignore rule and turn on validation for hidden elements

$('#myform').data("validator").settings.ignore = "";

FIDDLE

or

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

FIDDLE

The Bootstrap select plugin creates a new dropdown from an unordered list, and the original select is hidden and it's value is updated when the user interacts with the unordered list.

This has the disadvantange of also moving the error message, as the original, now hidden select is the element being validated, and the new visible dropdown made up of an unordered list is inserted by Bootstrap below the original select in the DOM, the error message is inserted after the original select, but before the unordered list, so it appears above the custom dropdown, not below it like it would if the original select was used.

To fix it you can move the error message for any given element rather easily

$('#myform').validate({ // initialize the plugin
    ignore: [],
    rules: {
        year: {
            required: true
        }
    },
    errorPlacement: function(error, element) {
        if (element.attr("name") == "year") {
          error.insertAfter(".bootstrap-select");
        } else {
          error.insertAfter(element);
        }
    },
    submitHandler: function (form) { // for demo
        alert('valid form submitted'); // for demo
        return false; // for demo
    }
});

FIDDLE