Simple JQuery Validator addMethod not working

Question

Updated question on the bottom

I am trying to validate a super simple form. Eventually the username will be compared to a RegExp statement and the same will go for the password. However right now I am just trying to learn the Validator addMethod format.

I currently have this script:

JQuery.validator.addMethod(
    "legalName",
    function(value, element) {
        if (element.value == "bob")
        {
            return false;
        }
        else return true;
    },
    "Use a valid username."
);

$(document).ready(function() {
    $("#form1").validate({
        rules: {
            username: {
                legalName: true
            }
        },
    });
});

Which if I am not mistaken should return false and respond with "Use a valid username." if I were to put "bob" into the form.

However, it is simply submitting it.

I am linking to JQuery BEFORE Validator in the header like instructed.

My uber simple form looks like this:

<form id="form1" method="post" action="">
  <div class="form-row"><span class="label">Username *</span><input type="text" name="username" /></div>
  <div class="form-row"><input class="submit" type="submit" value="Submit"></div>
</form>

Finally how would I go about restructing the addMethod function to return true if and false at the else stage while keeping the message alert for a false return? (ignore this last part if you don't understand what I was trying to say :) )

Thanks in advance.

Thank to everyone who pointed out my JQuery -> jQuery typo.

New -> RegEx in jQuery Validator addMethod

Ideally, I am trying to turn this into a simple login form (username/password). It is for demonstration only so it wont have a database attached or anything, just some simple js validations. I am looking to make the username validate for <48 characters, only english letters and numbers, no special characters. I thought a whitelist would be easiest so I had something like this: ^[a-zA-Z0-9]*${1,48} but I am not sure if that is proper JS RegExp (it varies from Ruby RegExp if I am not mistaken?...Usually I use rubular.com). Password will be similar but require some upper/lowercase and numbers.

I believe I need to make another $.validator.addMethod for legalPassword that will look very similar.

Edit

changed the regexp to ^[a-zA-Z0-9]+$ and added maxlength: 48 to my validate function. However the regexp is still not working and as far as i can tell it is correct.

Thanks to everyone who mentioned the case-sensitive typo! I will try to explain the second part a little better now. — tehaaron
– tehaaron, Commented Mar 8, 2011 at 7:57

alex · Accepted Answer · 2011-03-08 06:41:48Z

4

You are using JQuery, not jQuery (little j).

JavaScript is case sensitive...

>>> typeof jQuery
"function"
>>> typeof JQuery
"undefined"

If $ points to your jQuery object too (it does by default), then you can just use it.

As for your custom validation function, you could make that terser like so...

jQuery.validator.addMethod(
    "legalName",
    function(value, element) {
        return (element.value != "bob");
    },
    "Use a valid username."
);

For a case insensitive comparison, use toLowerCase() on the value first.

edited Mar 8, 2011 at 6:41

answered Mar 8, 2011 at 6:22

alex

492k205 gold badges891 silver badges992 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

tehaaron Over a year ago

Thanks for the detailed answer and being able to decipher the second part! I added a further question if you care to look at it.

alex Over a year ago

@tehaaron You will get better exposure by posting a new question :)

tehaaron Over a year ago

This is true...and you can get another answered question that way ;) haha

dleavitt · Accepted Answer · 2011-03-08 06:27:22Z

1

I was able to fix the first part simply by changing JQuery.validator.addMethod to $.validator.addMethod.

I don't totally understand your second question. If you describe the behavior you're interested in achieving, maybe I can help you get there.

answered Mar 8, 2011 at 6:27

dleavitt

1,39213 silver badges16 bronze badges

1 Comment

tehaaron Over a year ago

Thanks, I added another question on the bottom, if you care to have a look at it.

xkeshav · Accepted Answer · 2011-03-08 06:34:55Z

0

try with

jQuery.validator.addMethod("legalname", function(value, element) {
    var i = /^bob$/i;
    return (!(i.test(value)));
}, "Invalid user name");

see the DEMO

answered Mar 8, 2011 at 6:34

xkeshav

54.2k47 gold badges183 silver badges256 bronze badges

Collectives™ on Stack Overflow

Simple JQuery Validator addMethod not working

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related