Introduction: In this article i
am going to share the trick to highlight asp.net controls like textbox and
dropdownlist by changing the border color to red and background color to light
yellow or any other color on validation failure e.g. RequiredFieldValidator
failure error that occurs when control like textbox is left blank or dropdownlist
item is not selected in asp.net using javascript.In previous articles i explained How to Show jQuery notification pop up message box and hide after 5 seconds and Best example to implement stylish jQuery form validations and Show jQuery tooltip message on mouse over and Show Validation guidelines in web forms using JavaScript and JavaScript validation in asp.net website
Implementation: Let's create a demo web page to see the concept in action.
- In the <Head> tag of the design page e.g. (default.aspx) create the function that will loop through all the validations control present on the page and highlight the control by coloring the border to red if the controls are left blank.
<script type="text/javascript">
function validateAndHighlight() {
for (var
i = 0; i < Page_Validators.length; i++) {
var val = Page_Validators[i];
var ctrl =
document.getElementById(val.controltovalidate);
if (ctrl
!= null && ctrl.style != null) {
if
(!val.isvalid) {
ctrl.style.borderColor
= '#FF0000';
ctrl.style.backgroundColor = '#fce697';
}
else
{
ctrl.style.borderColor
= '';
ctrl.style.backgroundColor = '';
}
}
}
}
</script>
- In the <Form> tag of the design page e.g. (default.aspx), place the controls as:
<fieldset style="width:280px;">
<legend>Highlight control on validation failure</legend>
<table>
<tr>
<td>
Emp Name
</td>
<td>
<asp:TextBox ID="txtEmpName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvEmpName" runat="server"
ControlToValidate="txtEmpname"
Display="Dynamic"
ErrorMessage="*"
ForeColor="Red"
SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Salary
</td>
<td>
<asp:TextBox ID="txtSalary" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="rfvSalary" runat="server"
ControlToValidate="txtSalary"
Display="Dynamic"
ErrorMessage="*"
ForeColor="Red"
SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
Department
</td>
<td>
<asp:DropDownList ID="ddlDept" runat="server">
<asp:ListItem Value="0">--
Select Department --</asp:ListItem>
<asp:ListItem>HR</asp:ListItem>
<asp:ListItem>IT</asp:ListItem>
<asp:ListItem>Sales</asp:ListItem>
<asp:ListItem>Production</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="rfvDept" runat="server"
ControlToValidate="ddlDept"
Display="Dynamic"
InitialValue="0"
ErrorMessage="*"
ForeColor="Red"
SetFocusOnError="true"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSubmit" runat="server" Text="Sumbit" />
</td>
</tr>
</table>
</fieldset>
Asp.Net C# code to highlight
textbox and dropdownlist control on validation failure
- In the code behind file (default.aspx.cs) write the code on page load as:
protected void Page_Load(object
sender, EventArgs e)
{
Page.ClientScript.RegisterOnSubmitStatement(this.GetType(),
"val", "validateAndHighlight();");
}
Asp.Net VB code to highlight
textbox and dropdownlist control on validation failure
- In the code behind file (default.aspx.vb) write the code on page load as:
Protected Sub Page_Load(sender As
Object, e As EventArgs)
Page.ClientScript.RegisterOnSubmitStatement(Me.[GetType](), "val",
"validateAndHighlight();")
End Sub
Now over to you:
" I hope you have got the trick to highlight the asp.net controls on validation failure using javascript and
If you like my work; you can appreciate by leaving your comments, hitting
Facebook like button, following on Google+, Twitter, Linked in 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."
2 comments
Click here for commentsgood work
Replythanks Jamil for your feedback..i am glad you found this article useful..stay connected and keep reading for more useful updates like this..:)
ReplyIf 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..