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>
inforakesha 