remove jquery validation error message after select value

Question

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
}
}
});

Answer 1

You need to check the validity on change

$('.selectpicker').selectpicker().change(function(){
    $(this).valid()
});

Demo: Fiddle

Answer 2

Try this

$('select').change(function(){
    if ($(this).val()!="")
    {
        $(this).valid();
    }
});

Here is the Fiddle