CODEWITHSUNDEEP
jqueryjquery-validate
Shahzeb Khan
Shahzeb Khan

Reputation: 3642

jquery validation plugin using conditons

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

Upvotes: 0

Views: 97

Answers (5)

Sparky
Sparky

Reputation: 98718

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/

Upvotes: 1

Ryley
Ryley

Reputation: 21216

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/

Upvotes: 1

LHH
LHH

Reputation: 3323

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();
    }
});

Upvotes: 0

LHH
LHH

Reputation: 3323

Try this 

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

Upvotes: 0

juju
juju

Reputation: 449

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

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

Upvotes: 0

Related Questions