2 Validators Only 1 throwing catchable isvalid error

Question

I have this ASP.Net website with validation of REGEX and REQUIRED FIELD on the same control.

        <div class="col-sm-6 col-md-4 col-lg-3">
            <em>Requested By:&nbsp;&nbsp;
                <asp:RegularExpressionValidator ID="RegEx1" runat="server"
                    ControlToValidate="tb_ReqBy"
                    ErrorMessage="Invalid Characters"
                    CssClass="Validator_Message"
                    ValidationExpression="^[a-zA-Z0-9'.@\s!#&$%-]{1,50}$" />
            </em>
            <br />
                <asp:TextBox ID="tb_ReqBy" runat="server" />
            <br />
            <asp:RequiredFieldValidator ID="RFV1" runat="server"
                ControlToValidate="tb_ReqBy"
                ErrorMessage="Missing Requested By Name"
                CssClass="Validator_Message" />
        </div>

I am using this script found here on StackOverflow... It works well and I added it into my Master Page to use across the entire project. But it seems to have a limitation when working on multiple validation on a single control.

        <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 = "form-control-Error";
                            } else {
                                control.className = "form-control";
                            }
                        } catch (e) { }
                    }
                    return false;
                }
                return true;
            }
        </script>

And some CSS:

.form-control-Error {
    background-color: #F0C0C0;
    border-color: red;
}

.Validator_Message {
    font-size: .85em;
    font-style: italic;
    color: red;
    background-color: yellow;
}

However this only traps errors on the REQUIRED FIELD and will not catch the REGEX errors?

My thought is since the REGEX is first, it triggers an error but then the REQUIRED FIELD has data so it clears the error???? So then the JavaScript doesn't change the CSS styling as the control is valid??

I am at a loss as to how to trigger both errors? One thought I have was to just use the REGEX with defined character mins & maxes to trigger the REQUIRED FIELD error and if that's my solution I need to know for sure before I go and change a thousand input fields...

Thanks!

Answer 1

I changed the script to not change the CSS if the CSS already is set to form-control-Error

        <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 = "form-control-Error";
                            } else {
                                if (control.className == "form-control-Error")
                                    control.className = "form-control-Error";
                                else
                                    control.className = "form-control";
                            }
                        } catch (e) { }
                    }
                    return false;
                }
                return true;
            }
        </script>

This solved the clearing of duplicate validators on one control.

This came to me as a re-read my question. Once again StackOverflow helped just in a different way.

Thanks!