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

Also show the HTML markup for this form. – Sparky Nov 06 '13 at 19:39 — Sparky, Nov 06 '13 at 19:39
You've spelled your `minlength` rule incorrectly. – Sparky Nov 06 '13 at 19:45 — Sparky, Nov 06 '13 at 19:45

Ryley · Accepted Answer · 2013-11-06T17:18:51.160

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/

edited Nov 06 '13 at 17:18

answered Nov 06 '13 at 17:13

Ryley

21,046
2
67
81

+1... I didn't notice that you already caught the `minLength` error when I posted my answer. I too believe that this is the root cause of the whole problem. [The trailing commas are pretty sloppy coding but the IE version has to be pretty old (6 & 7) for this to be a real problem](http://trailingcomma.com/). – Sparky Nov 06 '13 at 19:51
From my experience, IE6/7 is still sadly prevalent, especially in corporate environments. I've happily stopped trying to make things pretty in IE6/7, but it is still nice for everything to at least work! – Ryley Nov 06 '13 at 22:07
That's very true, however I think it's worthwhile to point out this won't affect the _majority_ of "IE users". – Sparky Nov 06 '13 at 22:14
@Ryley thankyou so much, it works, problem was with "L". when i changed it to "minlength" , it worked. – Shahzeb Khan Nov 07 '13 at 06:10

score 1 · Answer 2 · answered Nov 06 '13 at 19:45

1

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/

answered Nov 06 '13 at 19:45

Sparky

98,165
25
199
285

thank you so much for you time and help. I marked Ryley's answer as i saw that first. Thank you once again for help and time. – Shahzeb Khan Nov 07 '13 at 06:11

score 0 · Answer 3 · answered Nov 06 '13 at 11:48

0

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

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

answered Nov 06 '13 at 11:48

juju

449
5
16

my form gets submit and show the following error in firebug console "$.validate.method[method] is undefined" – Shahzeb Khan Nov 06 '13 at 11:58
The `depends` option is not mandatory. A proper function in place of the `value` will also work when declaring the rule. See: http://jsfiddle.net/LzRDB/ – Sparky Nov 06 '13 at 19:58

score 0 · Answer 4 · answered Nov 06 '13 at 11:50

0

Try this

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

answered Nov 06 '13 at 11:50

LHH

3,233
1
20
27

my form gets submit and show the following error in firebug console "$.validate.method[method] is undefined" – Shahzeb Khan Nov 06 '13 at 11:59
I think you are passing string as a params and string does not have val() method.....just check again – LHH Nov 06 '13 at 12:05
console.debug($("#isSocialSignup").val()), this statement prints "false" on console – Shahzeb Khan Nov 06 '13 at 12:08
try this $("#isSocialSignup").val() == 'true' ? true : false – LHH Nov 06 '13 at 12:09
i tried it and gives error on console, i thing "required:false" is creating some problem. – Shahzeb Khan Nov 06 '13 at 12:11
see here..http://stackoverflow.com/questions/9026740/jquery-validator-depends-method-undefined – LHH Nov 06 '13 at 12:12
if you are just doing required: false then it's also working right? – LHH Nov 06 '13 at 12:18
No, with required:false, it gives the same error ($.validate.method[method] is undefined) and submits the form. – Shahzeb Khan Nov 06 '13 at 12:20

score 0 · Answer 5 · answered Nov 06 '13 at 12:31

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

jquery validation plugin using conditons

5 Answers5