错误的jQuery验证插件取决于。 字段无效时表格有效

Question

Problem description

I have a web form wizard for which I need validation that supports (a) hidden fields and (b) conditional validation. Jquery seems the best fit. Once all is set up as follows ( simplified example ):

$( "form[name=form]" ).validate({
    ...
    ignore: [],
    rules: {
        'form[owner]': {
            required: true,
        },
        'form[bank_account]': {
            required: true, 
            depends: function(element){
                    return $('#my_select').is(':checked');`
    messages : {
        'form[owner]' : {
             required: "The owner is necessary",
        },
        'form[bank_account]' : {
            required: "This field must be filled out when switch on",
         },
    ...
})

Error description

1. I force the validation to go wrong by submitting the form without filling out the fields listed above.
2. In my case, as there is a wizard, I output messages with an alert, for the errors are not visible at first.
3. I go back in the form, fill out just owner , and try to force again the validation to fail by submitting, with my_select checked
4. The validation is passed (and form submitted) although there is still a field which is not valid, resulting in an error on the server-side.

On javascript console, I got the following error:

Cannot read property 'call' of undefined. Exception occurred when checking element form[bank_account], check the method depends

Expected result

All fields should be validated accordingly to form validation each and every time the form is to be submitted

How can this be fixed?

Answer 1

As I did not find any questions similar to mine around. The solution I found is the following:

Instead of using the depends method, use a function to establish if the field should or should not be required, including it in the conditions on which this operation should rely (ie if a checkbox is checked or not)

$( "form[name=form]" ).validate({
    ...
    ignore: [],
    rules: {
        'form[owner]': {
            required: true,
        },
        'form[bank_account]': {
            required: function(element){
                    return $('#my_select').is(':checked') && $('form_bank_account').val();
    messages : {
        'form[owner]' : {
             required: "The owner is necessary",
        },
        'form[bank_account]' : {
            required: "This field must be filled out when switch on",
         },
    ...
})

Either documentation is confusing, or the library has a bug.