Jquery Validation messages not clearing on msdropdown change

Question

I have a form with two select boxes. First one is styled using msdropdown. I am validating the form using jquery validation(required). When I submit the form that two select boxes will be validate and error messages is showing. Thats fine.

But my issue is when I just changed the select box options, the validation message is clearing for normal select box. But it is not clearing for msdropdown select box. I need to click again the submit button to clear the messages. What should I do to validate that when I changed the select box option?

This is my validation rules block.

$(document).ready(function(e) {     
    $("body #webmenu").msDropDown();
    $("#frmTest").validate({
        rules: {
            normal: {
                required: true
            },
            webmenu: {
                required: true
            }
        }
    });
});    

I have created a fiddle with the scenario. Please have a look at it.

http://jsfiddle.net/LHF3G/

Answer 1

Use the plugin's .valid() method to trigger a validation test on the element upon the mouseup event. I used the browser's DOM inspector to find the target... the <li> with class _msddli_.

$('._msddli_').on('mouseup', function() { // target the custom line item on mouseup
    $('#webmenu').valid(); // validation test triggered on target element
});

Working DEMO: http://jsfiddle.net/LHF3G/1/

---

EDIT:

Another version working the same as above:

$('#webmenu').on('change', function() {  // target the original select on change
    $(this).valid();  // validation test triggered on target element 
});

DEMO: http://jsfiddle.net/LHF3G/3/

You can tweak the jQuery selectors and JavaScript event to suit any possible situation. However, the most important aspect here is that the .valid() method is the mechanism for triggering the validation test, which in turn will toggle the error message as required.

Answer 2

Thanks for your support. I finally solved the issue by adding the following code.

 $('#webmenu').on('change', function(){ 
     $('#frmTest').valid(); 
 })