I have a problem using bootstrap select plugin and jQuery validation. when i select value, error message This field is required not remove While normal validation(without bootstrap select plugin) after select value error message auto remove. how to fix this problem?

JSFIDDLE

HTML:

<form id=myform> <----With Select Plugin

    <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>

<form id=myform1> <----Without Select Plugin

    <select name=fruit>

        <option value=>Year</option>

        <option value=1>1955</option>

        <option value=2>1956</option>

    </select>

    <br/>

    <input type=submit />

</form>

JS:

$(document).ready(function () {

    $('.selectpicker').selectpicker();





    $('#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

        }

    });

});

// just for the demos, avoids form submit

jQuery.validator.setDefaults({

debug: true,

success: valid

});

$( #myform1 ).validate({

rules: {

fruit: {

required: true

}

}

});