ASP.NET Change Control Style When Validation Fails

CSS Style:

 <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .ErrorControl
        {

            // Put control style here which you want after validation fails
            background-color: #FBE3E4;
            border: solid 1px Red;
        }
    </style>


Java Script:

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


HTML or .ascx:

 <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="TextBox1"
            runat="server" ErrorMessage="Required"></asp:RequiredFieldValidator>
        <br />
        <br />        

           <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
            <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"
            ErrorMessage="Please Enter Valid Email" ControlToValidate="TextBox2"
            ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">         
            </asp:RegularExpressionValidator>

        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Submit" />
    </div>
    </form>


Comments

Popular posts from this blog

C# Copy files from one server to another

Export SharePoint Online Group Users to Excel using Powershell