Html Markup :
<form class="form_validation" action="" method="POST">
<input name="id" type="text" />
<input name="name" type="text" data-rules="First Name-required" />
<input name="email" type="text" data-rules="Email Address-required#Email Address-valid_email" />
<input name="url" type="text" data-rules="URL-valid_url" />
<input name="ip" type="text" data-rules="IP-valid_ip" />
<input name="password" id="txt_pass" type="password" data-rules="Password-min_length+8#Password-max_length+16" />
<input name="password2" type="password" data-rules="Confirm Password-matches+txt_pass+password" />
<input name="code" type="text" data-rules="Code-exact_length+5" />
<input name="range" type="text" data-rules="Range Value-numeric#Range Value-min+1#Range Value-max+5" />
<input name="alphabet" type="text" data-rules="Alphabet-alpha" />
<input name="alphabet_numeric" type="text" data-rules="Alphabet Numeric-alpha_numeric" />
<input name="numeric" type="text" data-rules="Numeric-numeric" />
<input name="is_numeric" type="text" data-rules="Is Numeric-is_numeric" />
<input name="integer" type="text" data-rules="Integer-integer" />
<input name="phone" type="text" data-rules="Phone Number-valid_phone" />
<input name="date" type="text" data-rules="Date-valid_date" />
</form>
Javascript :
$('.form_validation').validate({short_error_message: true});
Html Markup :
<form class="form_others" action="" method="POST">
<select name="salutation" data-rules="Salutation-required">
....
</select>
<input type="checkbox" name="options[]" value="1" data-rules="Options-multi_check+3" /> 1
<input type="checkbox" name="options[]" value="2" /> 2
<input type="checkbox" name="options[]" value="3" /> 3
<input type="checkbox" name="options[]" value="4" /> 4
<input type="checkbox" name="options[]" value="5" /> 5
<input type="radio" name="rating" value="1" data-rules="Rating-valid_radio" /> 1
<input type="radio" name="rating" value="2" /> 2
<input type="radio" name="rating" value="3" /> 2
<textarea name="comment" data-rules="Comment-required"></textarea>
<input type="checkbox" data-rules="You should tick agree.-valid_check" />
</form>
Javascript :
$('.form_others').validate();
| data-rules | message |
| [label]-required | : The [label] field is required. |
| [label]-valid_email | : The [label] field must contain a valid email address. |
| [label]-valid_url | : The [label] field must contain a valid URL. |
| [label]-valid_ip | : The [label] field must contain a valid IP. |
| [label]-matches+[ID]+[label_id] | : The [label] field does not match the [label_id] field. |
| [label]-min_length+[N] | : The [label] field must be at least [N] character(s) in length. |
| [label]-max_length+[N] | : The [label] field can not exceed [N] character(s) in length. |
| [label]-exact_length+[N] | : The [label] field must be exactly [N] character(s) in length. |
| [label]-min+[N] | : The [label] field must be greater than [N]. |
| [label]-max+[N] | : The [label] field must be less than [N]. |
| [label]-alpha | : The [label] field may only contain alphabetical characters. |
| [label]-alpha_numeric | : The [label] field may only contain alpha-numeric characters. |
| [label]-numeric | : The [label] field must contain only numbers. |
| [label]-is_numeric | : The [label] field must contain only numeric characters. |
| [label]-integer | : The [label] field must contain an integer. |
| [label]-valid_phone | : The [label] field must contain a valid phone number. |
| [label]-valid_date | : The [label] field must contain a valid date. |
| [message]-valid_check | : [message] |
| [label]-valid_radio | : Please choose one of [label] options. |
| [label]-multi_check+[min] | : Please choose (min) [min] of [label] options. |