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.