Search code examples
javascriptasp.netvalidationrequiredfieldvalidator

Working RequiredFieldValidator along with javascript


I have multiple RequiredFieldValidator such as:

<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="txtbox1" 
            Display="Dynamic" ErrorMessage="Required Field" SetFocusOnError="True" 
            ValidationGroup="validator1" CssClass="validator" />

Linked to this button:

<asp:LinkButton runat="server" ID="btnNext1" Text="Next Page" CssClass="btn" ValidationGroup="validator1" />

Along with some javascript:

<script type="text/javascript">
$(function() {
    function nextPage1() {

        $( "#divFirstPage" ).hide("fade");
        $( "#divSecondPage" ).show("fade");
        $( "#<%=btnNext1.ClientID%>" ).hide();
        $( "#<%=btnNext2.ClientID%>" ).show();
        $( "#<%=btnPrevious1.ClientID%>" ).show();
    };
    $( "#<%=btnNext1.ClientID%>" ).click(function() {
        nextPage1();
        return false;
    });
    $( "#divSecondPage" ).hide();
    $( "#divThirdPage" ).hide();
    $( "#<%=btnNext2.ClientID%>" ).hide();
    $( "#<%=btnPrevious1.ClientID%>" ).hide();
    $( "#<%=btnPrevious2.ClientID%>" ).hide();
});
</script>

But the javascript gets executed before the validations, so id need to execute the validations before the javascript


Solution

  • If my understanding is correct, you want to validate your form before executing javascript code

    Try something like this:

    $( "#<%=btnNext1.ClientID%>" ).click(function() {
        var val = Page_ClientValidate();
        if(!val) {
            return false;
        }
        nextPage1();
        return true;
    });
    

    Optionally if you want to specify a custom ValidationGroup, you can use the following code:

    Page_ClientValidate('your group name');