jQuery更改在浏览器中的行为不一致

Question

I'm new to JavaScript and I'm having a bit of a problem with some JQuery.validate code that I've inherited. Please forgive me if the answer is obvious :)

I have the following validation method declaration:

jQuery.validator.addMethod("myMethod", function(value, element, param) {
    /*...*/
    if (document.getElementById("DOMID") {
        /*...*/
    }
    /*...*/
)};

Essentially the method is checking for the existence of a certain DOM object and it sets some different validation parameters if it does exist. The object I want to validate is a set of <select> inputs wrapped in a parent <div id="DOMID"> , but there are a couple of different "DOMID" cases which each have slightly different validation rules - hence the check inside the method. I want to validate the <select> s each time one of them changes their value. I then have this activation:

$(".myClass").validate({
    onchange: true,
});

With myClass being applied to all of the <select> inputs I want to validate.

Lastly, I have this registration:

jQuery.validator.addClassRules(
{
   myClass:
     {
      myMethod: true,
     }
}

This works just fine in Chrome - validation is applied each time I change one of the <select> options.

However, in Firefox, this is not the case - I find that I have to blur the select in order for the validation to activate. So, that's one question: Why does change behave differently between Chrome and Firefox? Or is that not the case, and there's something else in my code which is responsible for this inconsistency?

The second question I have is about something I find quite peculiar. In attempting to fix the issue of Firefox not validating until blur, I changed my JavaScript getElementByID... to use jQuery, instead:

if ($("#DOMID").length > 0) { [...]

(I also tried if ($("#DOMID").get(0)) but they do the same thing, I think - unfortunately, neither made Firefox behave properly)

The weird part is that after I made this change, Chrome stopped validating on change and would only validate on blur. That's the only line of code I made a change to - I've since switched it back and Chrome behaves properly again. Why does that happen? How would the internals of the validation method affect when it was being called?

Hopefully this question makes sense - please let me know if any additional information would be helpful! Also any words of wisdom for debugging this problem would be very appreciated. Thanks very much for any advice!

Answer 1

You're using the jQuery Validate plugin improperly...

Quote OP :

"I want to validate the <select> s each time one of them changes their value. I then have this activation:"

$(".myClass").validate({
    onchange: true,
});

1) You cannot attach .validate() to any single input element. The .validate() method can only be attached to the <form> element ...

$('#myForm').validate({
    // options, rules, etc.
});

2) There is no such plugin option called onchange . You are only allowed to use the options that were created by the developer specifically for this plugin .

---

If you want to add and remove rules based on a select element, then use the .rules('add') and .rules('remove') methods .

$('#myselect').on('change', function() {
    $('#myInput').rules('add', {  // add rule(s) to #myInput
        required: true
    });
}); 

If instead you want to "validate" or test the validity of something, use the .valid() method .

$('#myselect').on('change', function() {
    $('#myInput').valid();  // trigger a test of #myInput
});