How can I trigger ASP.NET WebForms validators on field blur rather than only on submit?

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:

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

            


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

            

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

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

            


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

            

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