Change Background and Border Color of Invalid Controls when Validation

This blog defines how to change background and border color of invalid controls when validation in JavaScript.

Introduction

 

I was working with a customer who has invested a lot in redoing the validation in their web application. I accidentally suggested wouldn't it be nice if we could change the background or border of the field in question. The customer loved this idea which meant I'd just created more work for myself.

 

 

Place this in your page head Section

<script type="text/javascript" language="javascript">
      function validate() {
       var txt = document.getElementById('<%= txtusername.ClientID %>');
       var txt2 = document.getElementById('<%= txtpass.ClientID %>');
       if (txt.value == "") {
           txt.style.border = "1px solid Red";
           return false;
       }
       if (txt2.value == "") {
           txt2.style.border = "1px solid Red";
           return false;
       }
   }
</script>

Form tag in your page just Replace by this

<form id="form2" runat="server">
    <div style="width: 100%">
        <div style="margin-bottom: 200px;">
        </div>
        <div style="margin: 0px auto;">
            <table width="100%">
                <tbody>
                    <tr>
                        <td align="center">
                            <table border="0" width="400px">
                                <tbody>
                                    <tr>
                                        <td align="center">
                                            <strong style="font-size: 18px;">User Login</strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:textbox id="txtusername" height="30px" width="200px" runat="server"></asp:textbox>
                                            <asp:requiredfieldvalidator id="RequiredFieldValidator1" runat="server" display="Dynamic" validationgroup="Submit" controltovalidate="txtusername" forecolor="Red" errormessage="Enter UserName"></asp:requiredfieldvalidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <strong style="font-size: 18px;">Password </strong>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:textbox id="txtpass" height="30px" width="200px" textmode="Password" runat="server"></asp:textbox>
                                            <asp:requiredfieldvalidator id="RequiredFieldValidator2" runat="server" display="Dynamic" validationgroup="Submit" controltovalidate="txtpass" forecolor="Red" errormessage="Enter Password"></asp:requiredfieldvalidator>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td align="center">
                                            <asp:imagebutton id="ImageButton1" validationgroup="Submit" height="45px" width="100px" onclientclick="return validate();" imageurl="~/images/btn_sign-in2x.png" runat="server" onclick="ImageButton1_Click">
                                                <%-- IF YOU DON'T HAVE IMAGE FOR IMAGE BUTTON THEN USE THIS NORMAL BUTTON WHICH IS COMMENTED ---%>
                                                <%--<asp:button id="Button1" runat="server" text="Signin" onclientclick="return validate();">---%>
                                                <%-- IF YOU DON'T HAVE IMAGE FOR IMAGE BUTTON THEN USE THIS NORMAL BUTTON WHICH IS COMMENTED ---%>
                                                </asp:button>
                                            </asp:imagebutton>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div style="margin-top: 300px;">
        </div>
    </div>
</form>