how to highlight control on validation error using java script in asp.net c#
In this article, we highlight the textbox on
validation error using java script.
Java
script function
<script type="text/javascript">
function
textboxvaildation() {
for
(var i = 0; i < Page_Validators.length; i++)
{
var
value = Page_Validators[i];
var
control = document.getElementById(value.controltovalidate);
if
(control != null && control.style != null) {
if (!value.isvalid) {
control.style.borderColor
= '#FF0000';
control.style.backgroundColor = '#fce697';
}
else {
control.style.borderColor = '';
control.style.backgroundColor
= '';
}
}
}
}
</script
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="textvalidation.aspx.cs" Inherits="textvalidation"
%>
<!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></title>
<script type="text/javascript">
function
textboxvaildation() {
for
(var i = 0; i < Page_Validators.length; i++)
{
var
value = Page_Validators[i];
var
control = document.getElementById(value.controltovalidate);
if
(control != null && control.style != null) {
if (!value.isvalid) {
control.style.borderColor = '##B00000';
control.style.backgroundColor = '#FF3300';
}
else {
control.style.borderColor = '';
control.style.backgroundColor = '';
}
}
}
}
</script>
<style type="text/css">
.style1
{
width:
100%;
}
.style2
{
width:
70px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td align="justify" class="style2">
Name</td>
<td>
<asp:TextBox ID="txtname" runat="server" Height="26px" Width="160px" ></asp:TextBox>
<asp:RequiredFieldValidator ID="rfaname" runat="server"
ControlToValidate="txtname" ErrorMessage="Please enter name"
ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style2">
Phone No</td>
<td>
<asp:TextBox ID="txtphone" runat="server" Height="26px" Width="160px"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfaphone" runat="server"
ControlToValidate="txtphone" ErrorMessage="Please enter phone"
ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style2">
Email</td>
<td>
<asp:TextBox ID="txtemail" runat="server" Height="26px" Width="160px"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfaemail" runat="server"
ControlToValidate="txtemail" ErrorMessage="Please enter email id"
ForeColor="Red" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit" />
</td>
</tr>
</table>
</form>
</body>
</html>
C#
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
public partial class textvalidation : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
Page.ClientScript.RegisterOnSubmitStatement(this.GetType(),
"value", "textboxvaildation();");
}
}
Out
Put:-
how to highlight control on validation error using java script in asp.net c#
Reviewed by NEERAJ SRIVASTAVA
on
1:43:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
1:43:00 PM
Rating:
No comments: