jquery validation plugin using conditons

Question

i am using validation plugin to validate a form, here are my rules

$("#creatProfileForm").validate({
    ignore: [], //use for hidden fields validation, by default hidden fields are ignored
    rules : {
        "firstName" : {
            required : true,
        },
        "lastName" : {
            required : true,
        },
        "gender" : {
            required : true,
        },
        "password" : {
            required : function(element) {
                if($("#isSocialSignup").val() == "true" || $("#isSocialSignup").val() == true)
                    return true;
            },
            minLength : 6
        }
    },
        messages : {
            "firstName" : {
                required : 'First Name is required',
            },
            "lastName" : {
                required: "Last Name is required",
            },
            "gender" : {
                required : "Gender is required",
            },
            "password" : {
                required : "Password is required",
                minLength : "Lenght should be atleast 6 characters"
            }
        },
        errorPlacement: function(error, element) { //custom location for error placement
            if (element.attr("name") == "gender") {
              error.insertAfter(".temp");
            } else {
              error.insertAfter(element);
            }
          } 
});

UPDATE : if i remove the call back function and add "required:true", it works.

My problem is with password field, I have stored a Boolean value in view and using that value i am deciding the required for password field. If value is true, password is required else not required.

When i submit the form, on console i get "false" printed , but still password field also show message, "password is required"

What is wrong with my code. Kindly help me. thanks in advance

Answer 1

I think your problem is simply that there is no such method as minLength. You probably meant minlength. As @rubyist suggested, you need to change your required dependency to this:

required: $("#isSocialSignup").val() == 'true' ? true : false,

The one you had with $('#isSocialSignup').val() == 'true' || $('#isSocialSignup').val() == true, the 2nd part of that where you compare to the boolean true, well .val() will always tell you that it's true if there's anything in it at all, including the word "false". So that probably wasn't helping you!

Beyond that, your code looks fine to me. Too many trailing commas, which will upset IE users:

"gender": {
   required: true, //<---- that comma will cause an issue
}, //<--- this one won't because there is something after it

Semi-similar working example: http://jsfiddle.net/ryleyb/D59ZW/

Answer 2

Quote OP's comments:

"...error in firebug console $.validate.method[method] is undefined"

and

"...with required:false, it gives the same error ($.validate.method[method] is undefined) and submits the form."

The problem is simple... there is no such method called minLength.

The method is called minlength => note the lower-case l in place of the upper-case L.

See: http://jqueryvalidation.org/minlength-method/

Answer 3

Use the depends option: http://jqueryvalidation.org/validate/

required: {
            depends: function(element) {
                return $("#isSocialSignup").val() == "true" || $("#isSocialSignup").val() == true
            }
        }

Answer 4

Try this

rules : {
            "firstName" : {
                required : true,
            },
            "lastName" : {
                required : true,
            },
            "gender" : {
                required : true,
            },
            "password" : {
                required: $("#isSocialSignup").val() == 'true' ? true : false,
                minLength : 6
            }
        },

Answer 5

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
  });
$("#creatProfileForm").validate({
    rules : {
        "firstName" : {
            required : true,
        },
        "lastName" : {
            required : true,
        },
        "gender" : {
            required : true,
        },
        "password" : {
            required: ($("#isSocialSignup").val() == "true" || $("#isSocialSignup").val() == true) ? true : false,
            minLength : 6
        }
    },
        messages : {
            "firstName" : {
                required : 'First Name is required',
            },
            "lastName" : {
                required: "Last Name is required",
            },
            "gender" : {
                required : "Gender is required",
            },
            "password" : {
                required : "Password is required",
                minLength : "Lenght should be atleast 6 characters"
            }
        },
    submitHandler: function(form) {
    form.submit();
    }
});