jquery validation rules

Question

1. My phone validation depends on a checkbox (no, don't contact me via phone). If this is checked, then I will not need run the phone validation. I googled around and found 'depends' function.

I have

  $("#myForm").validate({
  ....
  rules: {
  phone1: {
    required: {
      depends: "!#pri_noPhone:checked"
    },
    number: true,
    minlength:3,
    }

It doesn't throw an error, but it still tries to validate the phone number.

2. Under the rules: how do i make sure that email and confirmEmail are the same? I have rules, and messages separate.

Solution 1

try something like this:

"#phone1": {
   number: true,
   minlength:3,
   required: function(element){
      return ($('#pri_noPhone_wrapper input:checked').val() == 'True');
   }
}

The HTML (after looking at this I forgot to add the wrapper HTML)

<span id='pri_noPhone_wrapper'>
Phone:
<input type="checkbox" name="pri_noPhone" value="what ever" />
</span>

Solution 2

I think you want your dependency specified using proper selector syntax:

required: {
    depends: "#pri_noPhone:not(:checked)"
}

EDIT

Steve's answer on the email:

confirmEmail: {
    required:true,
    equalTo: "#email"
},

Solution 3

You would use something lile this:

$("#myForm").validate({
      rules: {
          username: {
           email: {
                required:true,
                email:true,
                maxlength:255,
            },
            confirmEmail: {
                required:true,
                equalTo: "#email"
            },
         } 
       }
     })

Comments

[user12140001]

in IE7, i get an error saying a runtime error has occurred. error: expected identifier, string or number it points to: phone1: { required: { depends: "#pri_noPhone:not(:checked)" }, number: true, minlength:3, }, do you know what's going on in here? The FF and Firebug do not give the same error.

[user12140001]

sweeeet, how about validating for emailAddress = confirmEmailAddress ?

[user12140001]

equalTo: did the trick. Wiiii what would i do without you ppl here? thanks a million

[user12140001]

return ($('#pri_noPhone input:checked').val() == 'true'); this also works :) Thanks everybody!

[Joel]

This is really useful for complex stuff.

[Phill Pafford]

this is a mock of your question, you would have to change it to use the ID or CLASS variables to get it to work. I use this all the time and it works great. the required attribute function returns true or false if the checkbox is selected

[user12140001]

alert($('#pri_noPhone input:checked').val()); this displays 'undefined'. <input type="checkbox" name="pri_noPhone" id="pri_noPhone"/> there is no default value.