In this article I will explain with an example, how to change the Background and Border Color of Invalid Controls when Validation fails in ASP.Net.
The WebForm_OnSubmit function is an in-built ASP.Net JavaScript method which performs validation of controls and it needs to be modified and overridden in order to incorporate the Background and Border color changes of Invalid controls.
Note: The solution provided in this article is supports ASP.Net validators and works with all ASP.Net versions.
 
 
HTML Markup
The following HTML Markup consists of two TextBoxes with two associated RequiredFieldValidators and a Button.
Note: It is very important to set the ControlToValidate property even in case of CustomValidator, else the Background and Border Color of invalid control will not change when validation fails.
 
<table>
    <tr>
        <td>Name: </td>
        <td><asp:TextBox ID="txtName" runat="server" /></td>
        <td><asp:RequiredFieldValidator ID="valName" ControlToValidate="txtName" runat="server" ErrorMessage="*" /></td>
    </tr>
    <tr>
        <td>Age: </td>
        <td><asp:TextBox ID="txtAge" runat="server" /></td>
        <td><asp:RequiredFieldValidator ID="valAge" ControlToValidate="txtAge" runat="server" ErrorMessage="*" /></td>
    </tr>
    <tr>
        <td></td>
        <td><asp:Button ID="btnSubmit" runat="server" Text="Submit" /></td>
        <td></td>
    </tr>
</table>
 
 
The modified WebForm_OnSubmit function
The following function is modified version of the in-built WebForm_OnSubmit JavaScript function.
Inside this function, a loop is executed over the Page_Validators collection which holds the references of all the ASP.Net validators on the page.
Inside the loop, the control (whose Background and Border Color needs to be changed) is referenced using the ID value present in the controltovalidate property of the ASP.Net validator.
If the isvalid property of the ASP.Net validator is FALSE, then a CSS class is assigned to the invalid control which changes its Background and Border Color.
Note: This function needs to be placed just where the BODY tag ends and if you are using Master Page then place it before the BODY tag in the Master Page.
 
<script type="text/javascript">
    function WebForm_OnSubmit() {
        if (typeof (ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) {
            for (var i in Page_Validators) {
                try {
                    var control = document.getElementById(Page_Validators[i].controltovalidate);
                    if (!Page_Validators[i].isvalid) {
                        control.className = "ErrorControl";
                    } else {
                        control.className = "";
                    }
                } catch (e) { }
            }
            return false;
        }
        return true;
    }
</script>
 
 
Background and Border Color CSS class
The following CSS class is used for changing the Background and Border Color of the invalid control when validation fails.
<style type="text/css">
    input[type=text]
    {
        height: 20px !important;
        border: 1px solid #ccc;
    }
    .ErrorControl
    {
        background-color: #FBE3E4;
        border-color: Red !important;
    }
</style>
 
 
Screenshot
Change Background and Border Color of Invalid Controls when Validation fails in ASP.Net
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
View Demo
 
 
Downloads
Download Code