inforakesha

A fine WordPress.com site

JQUERY VALIDATION

Leave a comment

Link to Jquery Plugin:http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Link to JQuery:http://docs.jquery.com/Plugins/Validation

I am doing validation here for the textbox dropdown.

Here there are two things :1. rules- apply rule by using name attribute

2.Message- give custom message for different element rule

 

 

$(function () {

$(“#commentForm”).validate({

rules: {
FName: {
required: true,
minlength: 3,
maxlength: 20
},
LName: {
required: true,
minlength: 3,
maxlength: 20
},
email: {
required: true,
email: true,
},
country: {
required: true
},
gender: {
required: true
},
age: {
required: true
},
annual: {
required: true
},
mutual: {
required: true
}

},
messages: {
//comment: “Why in the heck would you leave the comment blank?”,
email: {
required: “please enter an email address?”,
email: “Email addresses are of the form user@host.”
},
FName: {
required: “First Name Required”,
minlength: jQuery.format(“You need to use at least {0} characters for your name.”),
maxlength: jQuery.format(“You can not use more than {0} characters for your name.”)
},
LName: {
required: “Last Name Required”,
minlength: jQuery.format(“You need to use at least {0} characters for your name.”),
maxlength: jQuery.format(“You can not use more than {0} characters for your name.”)
},
country: {
required: “select your country  ”
},
gender: {
required: “select your gender  ”
},
age:
{
required: “select your age  ”
},
annual:
{
required: “select your annual Revenue  ”
},
mutual:
{
required: “select your mutual fund  ”
},

},
});

});

 

 

This is my HTML page

<table id=”tblReg”>
<tr>
<td id=”tdfirstreg”>
<label  >First Name</label><span>*</span></td>
<td>
<input type=”text”  name=”FName” maxlength=”20″ minlength=”2″ id=”txtFName” /></td>
</tr>
<tr>
<td>
<label >Last Name</label><span>*</span></td>
<td>
<input type=”text”  name=”LName”  maxlength=”20″ minlength=”2″ id=”txtLname”/></td>
</tr>
<tr>
<td>
<label>Email Address<span>*</span></label></td>
<td>
<input type=”text”  name=”email” id=”txtEmail”/></td>
</tr>
<tr>
<td>
<label>Phone</label><span>*</span></td>
<td>
<input type=”text”  name=”phone”  id=”txtPhone”/></td>
</tr>
<tr>
<td>
<label>Country</label><span>*</span></td>
<td>
<select name=”country” id=”country”>
<option value=””>Select Country</option>
<option value=”01″>India</option>
<option  value=”02″>United state of America</option>
</select></td>
</tr>
<tr>
<td>
<label>Gender</label>
</td>
<td>
<select name=”gender” id=”gender”>
<option value=””>Select Gender</option>
<option value=”01″>Male</option>
<option value=”02″>Female</option>
</select></td>
</tr>
<tr>
<td>
<label>Age</label><span>*</span></td>
<td>
<select name=”age” id=”age”>
<option value=””>Select Age
</option>
<option value=”01″>10-20
</option>
<option value=”02″>20-30
</option>
</select></td>
</tr>
<tr>
<td>
<label>Annual Revenue</label><span>*</span> </td>
<td>
<select id=”annual” name=”annual”>
<option value=””>Select Annual Revenue
</option>
<option value=”01″>1L-5L</option>
<option value=”02″>5L-10L</option>
<option value=”03″>10L-20L</option>
</select>

</td>
</tr>
<tr>
<td></td>
<td>
<label>Mutual Fund Investments</label><span>*</span></td>
</tr>
<tr>
<td></td>
<td>
<select name=”mutual” id=”mutual”>
<option value=””>Select Mutual Funds
</option>
<option value=”01″>Birla Mutual Fund
</option>
<option value=”02″>Sun Mutual Fund
</option>
</select>
</td>
</tr>

</table>

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s