Here I am explaining how to validate asp.net mvc form validation using jquery validation plug in
1.For this we need jquery.js and jquery validation.js plugins
download link for jquery validation plugin is
http://jqueryvalidation.org/
2.add above js files to mvc view like below
<script src="../../js/jquery.js"
type="text/javascript"></script>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
3.design our view like below.
@using (Html.BeginForm("SignUp", "SignUp",
FormMethod.Post, new
{ id = "usersignupform" }))
{
<table width="932" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="left" valign="middle">
<table id="Cloud11" width="700" border="0" align="center" cellpadding="5" cellspacing="1"
bgcolor="#F3F7FE" style="width: 668px">
<tr>
<td width="351" align="left" valign="bottom" bgcolor="#F3F7FE" style="width: 251px">
@Html.Label("lblsignupid",
"SignUpId")
</td>
<td width="326" height="19" align="left" valign="bottom" bgcolor="#F3F7FE">
@Html.TextBox("TextBox1",
"")
</td>
</tr>
<tr>
<td width="351" align="left" valign="bottom" bgcolor="#F3F7FE" style="width: 251px">
First<span style="height: 26px; width: 251px;">
Name <span class="star">*</span></span>
</td>
<td width="326" height="19" align="left" valign="bottom" bgcolor="#F3F7FE">
Last<span style="height: 26px; width: 254px;">
Name <span class="star">*</span></span>
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#FDFEFF">
<span style="width: 297px; height: 30px"><a
name="here">
<div class="signup_textbox">
@Html.TextBox("txtFirstName",
"", new
{ @class = "signup_textbox-text"
})
</div>
</a></span>
</td>
<td height="40" align="left" valign="top" bgcolor="#FDFEFF">
<span style="width: 297px; height: 30px;">
<div class="signup_textbox">
@Html.TextBox("txtLastName",
"", new
{ @class = "signup_textbox-text"
})
</div>
</span>
</td>
</tr>
<tr>
<td width="351" align="left" valign="bottom" bgcolor="#F3F7FE" style="width: 251px">
Email Id(UserName For Login)<span class="star">*</span>
</td>
<td height="25" align="left" valign="bottom" bgcolor="#F3F7FE">
<span style="height: 36px; width: 184px;">Address<span class="star">*</span></span>
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#FDFEFF">
<span style="width: 297px; height: 30px">
<div class="signup_textbox">
@Html.TextBox("txtEmail",
"", new
{ @class = "signup_textbox-text"
})
</div>
</span>
</td>
<td height="40" align="left" valign="top" bgcolor="#FDFEFF">
<span style="width: 297px; height: 36px">
<div class="signup_textbox">
@Html.TextBox("txtAddress",
"", new
{ @class = "signup_textbox-text"
})
</div>
</span>
</td>
</tr>
<tr>
<td height="25" align="left" valign="top" bgcolor="#F3F7FE">
<span style="height: 30px; width: 184px;">Country<span class="star">*</span></span>
</td>
<td align="left" valign="top" bgcolor="#F3F7FE">
<span style="height: 36px; width: 184px;">State<span class="star">*</span></span>
</td>
</tr>
<tr>
<td height="40" align="left" valign="top" bgcolor="#FDFEFF">
<select id="ddlCountry" name="ddlCountry" class="signup_input_bg1">
<option value="">Select Country</option>
<option value="india">India</option>
</select>
</td>
<td align="left" valign="top" bgcolor="#FDFEFF">
<select id="ddlStates" name="ddlStates" class="signup_input_bg1">
<option value="">Select State</option>
<option value="AndhraPradesh">AndhraPradesh</option>
</select>
</td>
</tr>
<tr>
<td align="left" valign="bottom" bgcolor="#F3F7FE">
<span style="height: 42px; width: 184px;">City<span class="star">*</span></span>
</td>
<td height="25" align="left" valign="bottom" bgcolor="#F3F7FE">
<span style="height: 37px; width: 184px;">Zip/Postal Code<span class="star">*</span></span>
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#FDFEFF">
<span style="width: 297px; height: 42px">
<div class="signup_textbox">
@Html.TextBox("txtCity",
"", new
{ @class = "signup_textbox-text"
})
</div>
</span>
</td>
<td height="40" align="left" valign="top" bgcolor="#FDFEFF">
<span style="width: 297px; height: 37px">
<div class="signup_textbox">
@Html.TextBox("txtZip",
"", new
{ @class = "signup_textbox-text",
maxlength = "6" })
</div>
</span>
</td>
</tr>
<tr>
<td align="left" valign="bottom" bgcolor="#F3F7FE">
<span style="height: 34px; width: 184px;">Phone<span class="star">*</span></span>
</td>
<td height="25" align="left" valign="top" bgcolor="#F3F7FE">
<span style="height: 27px; width: 184px;">Mobile <span class="star">*</span></span>
</td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#FDFEFF">
<span style="width: 297px; height: 34px">
<div class="signup_textbox">
@Html.TextBox("txtPhone",
"", new
{ @class = "signup_textbox-text",
maxlength = "10" })
</div>
</span>
</td>
<td height="40" align="left" valign="top" bgcolor="#FDFEFF">
<div class="signup_textbox">
@Html.TextBox("txtMobile",
"", new
{ @class = "signup_textbox-text",
maxlength = "10" })
</div>
<label style="color: Red;">
9999999999</label>
</td>
</tr>
<tr>
<td height="25" align="left" valign="top" bgcolor="#F3F7FE">
<span style="height: 27px; width: 184px;">Password <span class="star">*</span></span>
</td>
<td align="left" valign="top" bgcolor="#F3F7FE">
<span style="height: 26px; width: 184px;">Confirm Password<span class="star">*</span></span>
</td>
</tr>
<tr>
<td height="40" align="left" valign="top" bgcolor="#FDFEFF">
<div class="signup_textbox">
@Html.Password("txtPassword",
"", new
{ @class = "signup_textbox-text",
maxlenth = "16" })
</div>
</td>
<td align="left" valign="top" bgcolor="#FDFEFF">
<span style="width: 297px; height: 30px">
<div class="signup_textbox">
@Html.Password("txtConfirmPassword",
"", new
{ @class = "signup_textbox-text",
maxlenth = "16" })
</div>
</span>
</td>
</tr>
<tr>
<td height="40" align="left" valign="top" bgcolor="#FDFEFF">
</td>
<td align="left" height="60" valign="middle">
<table style="width: 206px" id="TABLE1">
<tr>
<td align="center" valign="middle" style="width: 129px">
<input type="submit" id="btnSubmit" class="save_btn" style="font-weight: bold;" value="" />
</td>
<td align="right" valign="middle" style="width: 69px">
<input type="button" id="btnCancel" class="clear_btn" style="font-weight: bold; width: 80px;
height: 22px;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</table>
</td>
</tr>
</table>
}
4.now our form is design completed now we will do validations for our form using jquery validation plug in for this we need to add the JavaScript code like below.
$(document).ready(function () {
//sign
up form validations
$("#usersignupform").validate(
{
rules:
{
txtFirstName:
{
required: true
},
txtLastName:
{
required: true
},
txtEmail:
{
required: true,
email: true
},
txtAddress:
{
required: true
},
ddlCountry:
{
required: true
},
ddlStates:
{
required: true
},
txtCity:
{
required: true
},
txtZip:
{
required: true,
digits: true
},
txtPhone:
{
required: true,
digits: true
},
txtMobile:
{
required: true,
digits: true
},
txtPassword:
{
required: true,
minlength: 8
},
txtConfirmPassword:
{
required: true,
equalTo: txtPassword,
minlength: 8
}
},
messages: {
txtFirstName:
{
required: 'Please Enter First Name'
},
txtLastName:
{
required: 'Please Enter Last Name'
}, txtEmail:
{
required: 'Please Enter EmailId',
email: 'Please Enter Valid EmailId'
},
txtAddress:
{
required: 'Please Enter Address'
},
ddlCountry:
{
required: 'Please Select Country'
},
ddlStates:
{
required: 'Please Select State'
}
, txtCity:
{
required: 'Please Enter City'
},
txtZip:
{
required: 'Please Enter Postal Code',
digits: 'Postal Code Allows Only Digits'
},
txtPhone:
{
required: 'Please Enter Phone Number',
digits: 'Phone Number Allows Only Digits'
},
txtMobile:
{
required: 'Please Enter Mobile Number',
digits: 'Mobile Number Allows Only Digits'
},
txtPassword:
{
required: 'Please Enter Password',
minlength: 'Please Enter More Then 8 Characters'
},
txtConfirmPassword:
{ required: 'Please Enter Confirm Password',
minlength: 'Please Enter More Then 8 Characters',
equalTo: 'Password And Confirm Password Should Be Same'
}
}
});
$("#btnSubmit").live("click", function
() {
var
validatestatus = $("#usersignupform").valid();
if
(validatestatus == true) {
return true;
}
});
});
5.after that for testing click on submit button then the page shows like below.
see its working fine any queries leave comment here.......
