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

Answer 1

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"
    }
}