validate - ASP.Net MVC Formulario Ajax con validación de jQuery

validate mvc form jquery

Question

Tengo una vista de MVC con un formulario creado con el método de ayuda Ajax.BeginForm (), y estoy tratando de validar la entrada del usuario con el complemento jQuery Validation . Obtengo el complemento para resaltar las entradas con datos de entrada no válidos, pero a pesar de la entrada no válida, el formulario se publica en el servidor.

¿Cómo detengo esto y me aseguro de que los datos solo se publiquen cuando el formulario se valida?

Mi código

La forma:

<fieldset>
    <legend>leave a message</legend>
        <% using (Ajax.BeginForm("Post", new AjaxOptions
           {
               UpdateTargetId = "GBPostList",
               InsertionMode = InsertionMode.InsertBefore,
               OnSuccess = "getGbPostSuccess",
               OnFailure = "showFaliure"
           }))
           { %>
        <div class="column" style="width: 230px;">
            <p>
                <label for="Post.Header">
                    Rubrik</label>
                <%= Html.TextBox("Post.Header", null, new { @style = "width: 200px;", @class="text required" }) %></p>
            <p>
                <label for="Post.Post">
                    Meddelande</label>
                <%= Html.TextArea("Post.Post", new { @style = "width: 230px; height: 120px;" }) %></p>
        </div>
        <p>
            <input type="submit" value="OK!" /></p>
    </fieldset>

La validación de JavaScript:

$(document).ready(function() {
    // for highlight
    var elements = $("input[type!=''submit''], textarea, select");
    elements.focus(function() {
        $(this).parents(''p'').addClass(''highlight'');
    });
    elements.blur(function() {
        $(this).parents(''p'').removeClass(''highlight'');
    });

    // for validation
    $("form").validate();   
});

EDITAR: Como estaba recibiendo votos a favor por publicar problemas de seguimiento y sus soluciones en respuestas, aquí también está el método válido de validación ...

function ajaxValidate() {
    return $(''form'').validate({
    rules: {
        "Post.Header": { required: true },
        "Post.Post": { required: true, minlength: 3 }
    },
    messages: {
        "Post.Header": "Please enter a header",
        "Post.Post": {
            required: "Please enter a message",
            minlength: "Your message must be 3 characters long"
            }
        }
    }).form();
}

Answer 1

Intenta agregar una devolución de llamada OnBegin a AjaxOptions y devuelve el valor de $ (''form''). Validate (). Form () de la devolución de llamada. Al mirar la source , parece que esto debería funcionar.

function ajaxValidate() {
   return $(''form'').validate().form();
}

<% using (Ajax.BeginForm("Post", new AjaxOptions
       {
           UpdateTargetId = "GBPostList",
           InsertionMode = InsertionMode.InsertBefore,
           OnBegin = "ajaxValidate",
           OnSuccess = "getGbPostSuccess",
           OnFailure = "showFaliure"
       }))
       { %>

EDITAR actualizado con el nombre correcto de devolución de llamada.