Jquery Validator: Validate form without submiting

Question

Hi I want to validate a form using a button, but this button call a .ajax function to submit the form.

How can i do this? I've searching.

I had one way but i wonder if there's an easy way.

The way I accomplished this is:

Javascript

jQuery(document).ready(function () {
      $(ACCION).validate({
                rules: {
                    StartDate: {
                        required: true,
                        australianDate: true

                    },
                    EndDate: {
                        required: true,
                        australianDate: true

                    }

                }
            });

        });
 function Mostrar() {
        var textBox = $("#StartDate");
        var textBox2 = $("#EndDate");
        if (textBox.valid() == true & textBox2.valid() == true) {
            var fechaIn = document.getElementById('FechaInicio').value;
            var fechaFin = document.getElementById('FechaFin').value;                
            jQuery(NOMBRE_GRID).setGridParam({ postData: { fecha1: textBox.val(), fecha2: textBox2.val()} })
                            .trigger('reloadGrid');
        }
    }

HTML

<form id="myForm" method="post" action="">

            <div class="editor-label">
                <%= Html.Label("Fecha Inicio") %>
            </div>
            <div class="editor-field">
                <%=Html.TextBox("StarDate", DateTime.Now.ToString("yyyy-MM-dd"))%>
            </div>
            <div class="editor-label">
                <%= Html.Label("Fecha Final") %>
            </div>
            <div class="editor-field">
                <%=Html.TextBox("EndDate", DateTime.Now.AddDays(1).ToString("yyyy-MM-dd"))%>
            </div>           
            <input class="button button-big" name="Submit" type="button" value="Buscar Registros"
                onclick="Mostrar();" />
</form>

I wonder that instead of using valid() is there a way to validate the whole form.

Thanks!

Answer 1

You can also call .valid() on the form itself to cause a complete validation:

if($("#myForm").valid()) {

Answer 2

Another option:

HTML

            <div class="editor-label">
                <%= Html.Label("Fecha Inicio") %>
            </div>
            <div class="editor-field">
                <%=Html.TextBox("StarDate", DateTime.Now.ToString("yyyy-MM-dd"))%>
            </div>
            <div class="editor-label">
                <%= Html.Label("Fecha Final") %>
            </div>
            <div class="editor-field">
                <%=Html.TextBox("EndDate", DateTime.Now.AddDays(1).ToString("yyyy-MM-dd"))%>
            </div>           
            <input class="button button-big" name="Submit" type="submit" value="Buscar Registros">

Javascript

jQuery(document).ready(function () {
$(ACCION).validate({
                submitHandler: function (form) {
                    var fechaIn = document.getElementById('StartDate').value;
                    var fechaFin = document.getElementById('EndDate').value;
                    jQuery(NOMBRE_GRID).setGridParam({ postData: { fecha1: fechaIn, fecha2: fechaFin} })
                                .trigger('reloadGrid');
                },
                rules: {
                    StartDate: {
                        required: true,
                        australianDate: true

                    },
                    EndDate: {
                        required: true,
                        australianDate: true

                    }

                }
            });
    });