Introduction: In this article I am
going to explain how to highlight i.e. change border and background color of asp.net
controls on validation failure using
javascript and CSS
In previous articles i explained Server side validation code for asp.net textbox, dropdownlist,checkboxlist, radiobuttonlist, listbox, checkbox and radiobutton controls and Best example to implement stylish jquery form validations in asp.net and Validate checkboxlist using javascript and Validate radiobuttonlist using jquery and Show jquery tooltip message on mouse over on asp.net controls
Description: We all implement
validation on control placed on page and display appropriate messages on
validation failure. But to make it more eye catching we can also highlight the
invalid controls by changing the border and/or background color of invalid
controls.
Implementation: Let’s create a
sample page for demonstration purpose.
HTML Source Code
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style
type="text/css">
.error {
background-color: #F9E3E4;
border: solid 1px Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Name: </td>
<td>
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvName" SetFocusOnError="true" ForeColor="#FF3300" ControlToValidate="txtName"
runat="server" ErrorMessage="Required" Display="Dynamic"></asp:RequiredFieldValidator></td>
</tr>
<tr>
<td>Country: </td>
<td>
<asp:DropDownList ID="ddlCountry" runat="server" Width="150px">
<asp:ListItem Value="0" Text="--Select--"></asp:ListItem>
<asp:ListItem Value="1" Text="USA"></asp:ListItem>
<asp:ListItem Value="2" Text="Japan"></asp:ListItem>
<asp:ListItem Value="3" Text="India"></asp:ListItem>
<asp:ListItem Value="4" Text="China"></asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvCountry" ControlToValidate="ddlCountry"
runat="server" InitialValue="0" SetFocusOnError="true" ForeColor="#FF3300" ErrorMessage="Required" Display="Dynamic"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>Email: </td>
<td>
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmail" ControlToValidate="txtEmail"
runat="server" SetFocusOnError="true" ForeColor="#FF3300" Display="Dynamic" ErrorMessage="Required"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="rgeEmail" runat="server" ErrorMessage="Not a valid email" Display="Dynamic" ForeColor="#FF3300" SetFocusOnError="True" ControlToValidate="txtEmail" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"></asp:RegularExpressionValidator>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" /></td>
</tr>
</table>
</div>
</form>
<script
type="text/javascript">
function WebForm_OnSubmit() {
if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false)
{
var prevControl = "";
for (var i in Page_Validators) {
try {
var control =
document.getElementById(Page_Validators[i].controltovalidate);
if
(!Page_Validators[i].isvalid) {
control.className =
"error";
prevControl =
control;
} else {
control.className =
"";
}
if (control =
prevControl) {
control.className =
"error";
}
} catch
(e) { }
}
return false;
}
return true;
}
</script>
</body>
</html>
In the Code behind (.aspx.cs/vb) file write the code to be executed on
validation pass
protected void btnSubmit_Click(object
sender, EventArgs e)
{
}
Explanation: First in the <head>
tag of the page i have created a CSS class “error” to change the border and
background color of invalid controls.
Then Just above the closing </body>
tag I have used javascript’s WebForm_OnSubmit
method to check and highlight control on validation failure. It is must to
place this code just above the closing </body> tag otherwise it will not
work.
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..