Change Background color of Error control with multiple Validators in ASP.Net

irshad12...

SOLVED CLOSED ACTIVE ANSWERED
User: irshad1231
Posted: on Jan 05, 2014 08:28 AM
Forum: ASP.Net AJAX
Answer: 1
Views: 10283

Dear Experts,

i used this link for validation

http://www.aspsnippets.com/Articles/Change-Background-and-Border-Color-of-Invalid-Controls-when-Validation-fails-in-ASP.Net.aspx

and its working fine for one one validation. In my design, textbox has multiple validations as required field validator and regular expression validator and this script if not working when i click submit button.

please look the below design.aspx

<asp:TextBox runat="server" ID="txtAddFName" MaxLength="20"></asp:TextBox> <asp:TextBoxWatermarkExtender ID="TextBox_FN_TextBoxWatermarkExtender" WatermarkText="First Name" runat="server" Enabled="True" TargetControlID="txtAddFName" WatermarkCssClass="WaterMarkedTextBox"> </asp:TextBoxWatermarkExtender> <asp:RequiredFieldValidator runat="server" ID="rfvFName" ControlToValidate="txtAddFName" ErrorMessage="*" SetFocusOnError="true" BorderColor="Red" ForeColor="Red"> </asp:RequiredFieldValidator>

<asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat="server" ControlToValidate="txtAddFName" ErrorMessage="only Character" SetFocusOnError="true" ForeColor="#FF3300" Text="<img src='images/text_notmatch.gif' title='Job title Contains only Character!' />" ValidationExpression="^[a-zA-Z ]+$"></asp:RegularExpressionValidator>

please let me know how can i validate

Mudassar

0 3

Reply
ANSWER
User: Mudassar
Replied: on Jan 05, 2014 10:10 AM
Report

Try this

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
        .ErrorControl
        {
            background-color: #FBE3E4;
            border: solid 1px Red;
        }
    </style>
</head>
<body>
    <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>
        <asp:RegularExpressionValidator ID="Regex1" runat="server" ControlToValidate="TextBox1"
            ValidationExpression="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" ErrorMessage="Password must contain: Minimum 8 characters atleast 1 Alphabet and 1 Number"
            ForeColor="Red" />
        <br />
        <br />
        <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
        <asp:CustomValidator ID="CustomValidator1" runat="server" ErrorMessage="Required"
            ControlToValidate="TextBox2" ValidateEmptyText="true" ClientValidationFunction="Validate"></asp:CustomValidator>
        <script type="text/javascript">
            function Validate(sender, args) {
                if (document.getElementById(sender.controltovalidate).value != "") {
                    args.IsValid = true;
                } else {
                    args.IsValid = false;
                }
            }
        </script>
        <br />
        <br />
        <asp:Button ID="Button1" runat="server" Text="Submit" />
    </div>
    </form>
    <script type="text/javascript">
        function WebForm_OnSubmit() {
            var errorControls = new Array();
            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) {
                            errorControls[errorControls.length] = control;
                        }
                        control.className = "";
                    } catch (e) { }
                }
                for (var i in errorControls) {
                    errorControls[i].className = "ErrorControl";
                }
                return false;
            }
            return true;
        }
    </script>
</body>
</html>

Change Background color of Error control with multiple Validators in ASP.Net

Company

Explore

Follow us

Contact Us