Description:
In this example we explain that how to set cursor to
first error when validation raise error in asp.net.or scroll to the first error
when error is raised in asp.net.
We all know that for the user point of view if our
application have a long form at that time user will fill up the form and then
last when he/she click on the submit button and if the validation is fired at
that time user doesn’t have any idea which filled are missing or incorrect
because of the long form.
So avoid this type of mistake and provide nice layout
to the user for the end user satisfaction we have to direct scroll user to the
first error raised by the validator so user can easily understand that and
solved that.
So below is the code that demonstrate how to scroll to
first validator error when validation failed in asp.net.
scrolltofirsterror.aspx:
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="scrolltofirsterror.aspx.cs"
Inherits="scrolltofirsterror"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Scroll to (First error) First Validator that
raised error when Validation fails
in ASP.Net</title>
</head>
<body>
<form
id="form1"
runat="server">
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script
type="text/javascript">
function
WebForm_OnSubmit() {
if
(typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit()
== false) {
for
(var i in
Page_Validators) {
try
{
if (!Page_Validators[i].isvalid) {
var control = $("#"
+ Page_Validators[i].controltovalidate);
var top = control.offset().top;
$('html, body').animate({ scrollTop: top - 10 },
800);
control.focus();
return;
}
} catch
(e) { }
}
return
false;
}
return
true;
}
</script>
<asp:Panel ID="userpnl" Height="250px" ScrollBars="Both" runat="server" Font-Bold="False"
GroupingText="Register">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<td>
User Name
</td>
<td>
<asp:TextBox ID="txt_UserName" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" ErrorMessage="*"
ForeColor="Red"
ControlToValidate="txt_UserName"
runat="server"
/>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
Password:
</td>
<td>
<asp:TextBox ID="txt_pwd" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" ErrorMessage="*"
ForeColor="Red"
ControlToValidate="txt_pwd"
runat="server"
/>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
Mobile No:
</td>
<td>
<asp:TextBox ID="txt_MoNo" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" ErrorMessage="*"
ForeColor="Red"
ControlToValidate="txt_MoNo"
runat="server"
/>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
Email:
</td>
<td>
<asp:TextBox ID="txt_Email" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ID="RequiredFieldValidator4" ErrorMessage="*"
ForeColor="Red"
ControlToValidate="txt_Email"
runat="server"
/>
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
</td>
<td colspan="2">
<asp:Button ID="btnSubmit" Text="Submit" runat="server" />
</td>
</tr>
</table>
</asp:Panel>
</form>
</body>
</html>
0 comments:
Post a Comment