Simple JQuery Validator addMethod not working

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({
        rule开发者_开发百科s: {
            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.

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.

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.

try with

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

see the DEMO