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/

[tag:jquery-validation-engine] has nothing to do with the [tag:jquery-validate] plugin. Edited tags. — Sparky, Dec 28 '13 at 19:37
@Manish, or he can trigger `.valid()` on the `mouseup` event. — Sparky, Dec 28 '13 at 19:57
@Sparky by manually i meant on change remove error http://jsfiddle.net/LHF3G/2/ — Manish, Dec 28 '13 at 20:00
@Manish, I understood what you meant... however, I think it's much better to let the plugin handle the error messages: http://jsfiddle.net/LHF3G/1/ — Sparky, Dec 28 '13 at 20:02

Sparky · Answer 1 · 2013-12-29T17:01:55.070

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.

score 1 · Answer 2 · answered Dec 29 '13 at 06:06

1

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

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

answered Dec 29 '13 at 06:06

Arun SS

1,791
8
29
48

This is basically my answer. Although, if you use `$(this).valid()`, you will trigger the validation test on the relevant element instead of the whole form. See: http://jsfiddle.net/LHF3G/3/ – Sparky Dec 29 '13 at 06:40

Jquery Validation messages not clearing on msdropdown change

2 Answers2