jQuery Simple Validation

Demo 1

ID
First Name *
Email Address *
URL
IP
Password
Confirm Password
Code
Range Value
Alphabet
Alphabet Numeric
Numeric
Is Numeric
Integer
Phone Number
Date


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});

Demo 2

Salutation *

Options *
1   2   3   4   5

Rating *
1   2   3  

Comment *
  I agree to the Terms of Use and Privacy Policy.


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();

DOCUMENTATION

data-rulesmessage
[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.