为什么我的函数在jQuery Validation Plugin中的规则内没有返回false？

Question

In jQuery Validation Plugin I have a rule for an input field that should be set to false if a hidden input has val equal to 1, and true if 2.

I have made a function inside one of the rules for the input field, where I look for the hidden input val, and returning true or false based on the number. However, it is returning true no matter what, even though I can see it should be returning false. See JSfiddle

HTML:

<form>
  <input type="hidden" name="pick" value="1"/>
  <label>Username:</label>
  <input name="user" id="user" type="text"/>
  <input type="Submit"/>
</form>

jQuery:

$('form').validate({
    rules: {
    user: {
        required: true,
        email: function(){
          if($('input[name="pick"]').val() == 1){
            console.log('Email shold be false');
            return false;
          }else{
            return true;
        }
      }
    }
  }
});

Why is "return false" not working? I can see in the console that "Email should be set to false"

Note: This is just an example of what I am trying to achieve. I am going to have a lot more inputs and rule-changes. Also, the hidden input field is generated by other measures (Not two buttons like in the example). I know I could just make 2 forms, but I rather want to do it with 1, because there is going to be a lot of changes and that would require a lot of forms / double js code.

Answer 1

"Why is my function inside a rule in jQuery Validation Plugin not returning false?"

It's not. The email rule is seeing your function in place of a boolean and interpreting its mere existence as "not false ", thereby enabling the rule.

In order to use a function here, it needs to be inside of the depends callback parameter .

Also, since you need to get a boolean in the first place, there is no need for an if/else statement; just return the result of your conditional statement.

Flip the conditional to a "not equals" ( != ), so the email rule is not enforced when the hidden value is 1 .

rules: {
    user: {
        required: true,
        email: {
            depends: function(element) {
                return ($('input[name="pick"]').val() != 1);
            }
        }
    }
}

Working DEMO: jsfiddle.net/v4bf1mvj/

Answer 2

You shouldn't set email to be a function ( email: function(){} ).

You should set the properties of the email object so that the framework can read what it needs to.

So to place your own function in email to validate (return true or false) you should do so like this:

$('form').validate({
            rules: {
                user: {
                    required: true,
                    email: {
                        depends: function () {
                            var checkValue = $('input[name="pick"]').val() == 1;
                            return checkValue;

                            // Or this - depending on your requirements.
                            // return !checkValue;
                        }
                    }
                }
            }
        });