Custom rules using Jquery Validate plugin

Question

I've read all of the Jquery Validate documentation but I'm still not clear on how to have my own custom rules for validating inputs.

HTML

<form id="myForm">
   <input type="text" name="firstName" class="required" />
   <input type="text" name="lastName" class="required" />
   <input type="text" name="phone" class="phone" />
</form>

JQuery/Javascript

$("#myForm").validate({
   rules: {
      // what do I put here so that an input with class phone is validated?
   },
   messages: {
      // what do I put here so that this message is displayed if .phone is invalid?
   }
});

From what I've read its possible to build my own rule so that phone number is not only required but its also exactly 10 digits and if it isn't I can specify the message to show.

The JS above is what I've tried essentially straight from the documentation but it doesn't work. The field is never validated and the message is never displayed.

Any help is appreciated

kasdega · Accepted Answer · 2011-08-29 03:58:55Z

2

you can do something like this:

rules: {
    name1: {
        required: true,
        ValidCharsGeneral: true,
        minlength: 2,
        maxlength: 50
    },
    name2: {
        required: true,
        ValidCharsGeneral: true,
        minlength: 2,
        maxlength: 50
    }
},
messages: {
    name1: {
        required: "This information is required",
        minlength: "Username must be at least 6 characters long",
        maxlength: "Username must be at most 50 characters long",
        remote: "Username is already in use"
    },
    name2:{
        required: "This information is required",
        email: "Email address is not valid",
        remote: "Email address is already in use"
    }
}

edited Aug 29, 2011 at 3:58

kasdega

18.9k13 gold badges56 silver badges90 bronze badges

answered Aug 23, 2011 at 20:16

kleinohad

5,9202 gold badges29 silver badges35 bronze badges

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

1 Comment

kasdega Over a year ago

are id1 and id2 then the classes I would use for the input elements?

Adrian J. Moreno · Accepted Answer · 2011-08-23 20:43:42Z

There is no default "phone" validator, however the additional-methods.js file contains validators for US and UK phone number patterns. You can find links to that file here.

You can run this code here: http://jsfiddle.net/iknowkungfoo/XCuPj/

HTML

<form id="myForm">
   <input type="text" name="firstName" class="required" /><br />
   <input type="text" name="lastName" class="required" /><br />
   <input type="text" name="phone" class="phoneUS digits" maxlength="10" /><br />
   <input type="submit" />
</form>

JavaScript

$('#myForm').validate({
    messages: {
        phone: "Invalid phone number, please correct this."
    }
});

Via the class attributes, I've specified that the phone field shoudl match the "phoneUS" and "digits" validation. I've also specified that the "maxlength" for the field is 10. Then, in the JavaScript code, I've specified the message to be displayed when the field names phone fails validation.

Alternately, I can specify a message for each validator that is associated with the phone field.

Alternate JavaScript http://jsfiddle.net/iknowkungfoo/dvfJu/2/

$('#myForm').validate({
    messages: {
        phone: {
            phoneUS: "phoneUS failed",
            digits: "digits failed"
        }
    }
});

FWIW, if you use the phoneUS validator and specify the maxlength to 10, then there's no room for dashes between the sections of a phone number. Given that the phoneUS validator does not allow alpha-numeric characters (other than a dash), the digits validator is unnecessary.

Collectives™ on Stack Overflow

Custom rules using Jquery Validate plugin

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related