Step 1: Move to cursor first validation control error while submit- Create a new empty website.
Add the new empty webpage.
Step 2: Adding the code in the code behind page.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 id="Head1" runat="server">
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
height: 671px;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
.auto-style1 {
height: 32px;
}
</style>
<link href="css/mailtip.css" rel="stylesheet" />
<script src="qury/jquery-1.11.3.js" type="text/javascript"></script>
<script src="qury/jquery.mailtip.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var info = $('.info');
$('#txtEmail').mailtip({
onselected: function (mail) {
info.text('you choosed email: ' + mail)
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<td>
First Name
</td>
<td>
<asp:TextBox ID="txtFirstName" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtFirstName"
runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
Last Name:
</td>
<td>
<asp:TextBox ID="txtLastName" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtLastName"
runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
Designation:
</td>
<td>
<asp:TextBox ID="txtDesignation" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtDesignation"
runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
Address:
</td>
<td>
<asp:TextBox ID="txtAddress" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtAddress"
runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td>
Telephone:
</td>
<td>
<asp:TextBox ID="txtTelephone" runat="server" />
</td>
<td>
<asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtTelephone"
runat="server" />
</td>
</tr>
<tr>
<td colspan="3">
</td>
</tr>
<tr>
<td class="auto-style1">
Email:
</td>
<td class="auto-style1">
<asp:TextBox ID="txtEmail" runat="server"/>
</td>
<td class="auto-style1">
<asp:RequiredFieldValidator ErrorMessage="*" ForeColor="Red" ControlToValidate="txtEmail"
runat="server" />
</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>
</div>
</form>
<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>
</body>
</html>
Note: Javascript which is used for the purpose highlighted in red color.
Step 3:Run the website. And check the out put .
Example Video-
No comments:
Post a Comment