Change Background and Border Color of Invalid Controls when Validation

Change Background and Border Color of Invalid Controls when Validation

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