Highlight asp.net textbox,dropdownlist controls on validation failure error using JavaScript

highlight asp.net controls on validation failureIntroduction: 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."
Previous
Next Post »

2 comments

Click here for comments
February 20, 2014 ×

thanks Jamil for your feedback..i am glad you found this article useful..stay connected and keep reading for more useful updates like this..:)

Reply
avatar

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..