ASP.NET WebForms Validators Only Trigger After Submit Button Click Instead of Field Blur

Question

I'm developing an ASP.NET WebForms application and have implemented several RegularExpressionValidator controls to validate user inputs. The expected behavior is for these validators to display error messages immediately when a user moves focus away from an input field (i.e., on the blur event) if the input is invalid. However, currently, the validation messages only appear after clicking the "Submit" button.

<asp:Label ID="Label2" runat="server" Text="Name"></asp:Label>
 <br />
 <asp:TextBox ID="nametxt" runat="server"></asp:TextBox>
     <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ErrorMessage="Fill The Name" ControlToValidate="nametxt" ForeColor="#CC0000"></asp:RegularExpressionValidator>
 <br />
    <asp:Label ID="Label3" runat="server" Text="sem"></asp:Label>
 <br />
 <asp:TextBox ID="semtxt" runat="server"></asp:TextBox>
     <asp:RegularExpressionValidator ID="RegularExpressionValidator2" runat="server" ErrorMessage="1-8 num" ControlToValidate="semtxt" ForeColor="#CC0000"></asp:RegularExpressionValidator>
 <br />
    <asp:Label ID="Label4" runat="server" Text=" email"></asp:Label>
 <br />
 <asp:TextBox ID="emailtxt" runat="server"></asp:TextBox>
     <asp:RegularExpressionValidator ID="RegularExpressionValidator3" runat="server" ErrorMessage="Fill The Email" ControlToValidate="emailtxt" EnableClientScript="False" ForeColor="Red"></asp:RegularExpressionValidator>
 <br />
    <asp:Label ID="Label5" runat="server" Text="password"></asp:Label>
 <br />
 <asp:TextBox ID="passtxt" runat="server"></asp:TextBox>
    <asp:RegularExpressionValidator ID="RegularExpressionValidator5" runat="server" ErrorMessage="Fill The Password" ControlToValidate="passtxt" ForeColor="#CC0000"></asp:RegularExpressionValidator>
 <br />
    <asp:Label ID="Label6" runat="server" Text="confom password"></asp:Label>
 <br />
 <asp:TextBox ID="copasstxt" runat="server"></asp:TextBox>
     <asp:RegularExpressionValidator ID="RegularExpressionValidator7" runat="server" ErrorMessage="Fill The Password" ControlToValidate="copasstxt" ForeColor="#CC0000"></asp:RegularExpressionValidator>
     <br />
     <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="Submit" />
 <br />

Answer 1

Client side validation does trigger, and does run, and does run without a submit.

However, for a typical "required" validator? Well, of course if you don't change anything, and just tab though the control, then of course without changes, then validation does not run. Hence, in this case, then you have to hit the submit button (any post-back) to see the validation text.

However, if you "erase" or "change" a control, then validation will run at that point in time (client side, automatic, and without need to post-back).

Hence this example:

Markup:

            <label>Enter First Name</label>
            <asp:TextBox ID="txtFirst" runat="server"
                CssClass="form-control"
                CausesValidation="true"
                ></asp:TextBox>
             <asp:RequiredFieldValidator ID="rFirst" runat="server" 
                ErrorMessage="First name Required"
                ControlToValidate="txtFirst"
                ></asp:RequiredFieldValidator>
            <br />
            <br />

            <label>LastName</label>
            <asp:TextBox ID="txtLast" runat="server"
                CssClass="form-control"></asp:TextBox>
            <asp:RequiredFieldValidator ID="rLast" runat="server" 
                ErrorMessage="Last name Required"
                ControlToValidate="txtLast"
                ></asp:RequiredFieldValidator>
            <br />
            <br />
            <asp:Button ID="cmdDone" runat="server" Text="Done"
                CssClass="btn"/>

So, if we erase/empty a control, then validation will run.

Hence:

However, without changing the control? Then you have to force/run the validators.

This example will thus run all the validators, and will much behave as if you hit the submit button (any standard asp.net button that posts back). Hence, we add an blur event to the controls.

Hence this markup:

            <label>Enter First Name</label>
            <asp:TextBox ID="txtFirst" runat="server"
                CssClass="form-control"
                onblur="showallv()">
            </asp:TextBox>
             <asp:RequiredFieldValidator ID="rFirst" runat="server" 
                ErrorMessage="First name Required"
                ControlToValidate="txtFirst"
                ></asp:RequiredFieldValidator>
            <br />
            <br />

            <label>LastName</label>
            <asp:TextBox ID="txtLast" runat="server"
                CssClass="form-control"
                onblur="showallv()">
            </asp:TextBox>
            <asp:RequiredFieldValidator ID="rLast" runat="server" 
                ErrorMessage="Last name Required"
                ControlToValidate="txtLast"
                ></asp:RequiredFieldValidator>
            <br />
            <br />
            <asp:Button ID="cmdDone" runat="server" Text="Done"
                CssClass="btn"/>


            <script>

                function showallv() {
                    // show all validator messages
                    for (var i = 0; i < Page_Validators.length; i++) {
                        var vDator = Page_Validators[i]
                        ValidatorValidate(vDator)
                    }
                }


            </script>

And now we don't have to modify the textbox, but just tabbing though the control will trigger the validators on the page.