To do form validation using JQuery you can follow the following steps:
1.down load JQuery file from http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
add this file to your project or refer the above link in master page
< script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" / >
2.write css file add this file your application.
< link href="CSS/Insitecss.css" rel="stylesheet" type="text/css" />;1.down load JQuery file from http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
add this file to your project or refer the above link in master page
< script src="Scripts/jquery-1.4.1.min.js" type="text/javascript" / >
2.write css file add this file your application.
3.write the bellow code in separate file and add this in master page
< script src="Scripts/Test.js" type="text/javascript"/ >
$(document).ready(function () {
// key up function is used to validate the control data at the time of entering
$(".onlynumbers").keyup(function (e) {
this.value = this.value.replace(/[^0-9 ]/g, "")
});
$(".onlychars").keyup(function (e) {
this.value = this.value.replace(/[^A-Z]/g, "");
});
var arrmessage = new Array();
arrmessage[0] = "required field";
arrmessage[1] = "Select";
$('.btn-submit').click(function (e) {
// get current form
var $formid = $(this).parents('form');
var status = true;
$('.required', $formid).each(function () {
// validate the all mandatory fields
var InputValue = $(this).val();
if ($(this).hasClass('txtbox') == true) {
if (InputValue == "" || InputValue == null || InputValue == "required field") {
$(this).val(arrmessage[0]);
$(this).addClass('error');
status = false;
}
}
});
if (!status) {
// if any one of the mandatory field is not entered the page is not submitted to server
e.preventDefault();
}
});
$(".required").focus(function () {
// whereever user click on the mandatory field it clears the error messages
$(this).removeClass("error");
var $val = $(this).val();
if (jQuery.inArray($val, arrmessage) > -1) {
$(this).val("");
}
});
});
4.give css classes to your web page controls as follows
5.asp.net page design as follows
<table>
<tr>
<td>
<asp:TextBox ID="TextBox1"
runat="server"
CssClass="required
txtbox onlynumbers"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="TextBox2"
runat="server"
CssClass="required
txtbox onlychars"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="Button1"
CssClass="btn-submit"
runat="server"
Text="Button"
onclick="Button1_Click" />
</td>
</tr>
</table>
check this code working fine.