Como, no ASP.NET MVC, impedir o envio de jquery ajax se a validação falhar
estou usandoASP.NET 5 MVC RC1
Os plug-ins de validação de jquery que meu ASP.NET MVC usa são o jquery.validate.js padrão que um projeto de modelo padrão do ASP.NET 5 usa.
/*!
* jQuery Validation Plugin v1.14.0
*
* http://jqueryvalidation.org/
*
* Copyright (c) 2015 Jörn Zaefferer
* Released under the MIT license
*/
e jquery.validation.unobtrusive.js
/*!
** Unobtrusive validation support library for jQuery and jQuery Validate
** Copyright (C) Microsoft Corporation. All rights reserved.
*/
Forneci um exemplo simples de campo obrigatório abaixo para demonstrar meu problema.
ViewModel:
public class TierImportStatusUpdateViewModel
{
[Required]
public string String1 { get; set; }
[Required]
public string String2 { get; set; }
//more fields
}
cshtml:
@model MyViewModel
<form action="/controller/action" data-ajax="true" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#dic1" id="form1" method="post" class="allforms">
@Html.LabelFor(model=>model.String1)
@Html.EditorFor(model=>model.String1)
@Html.ValidationMessageFor(model=>model.String1)
<br>
@Html.LabelFor(model=>model.String2)
@Html.EditorFor(model=>model.String2)
@Html.ValidationMessageFor(model=>model.String2)
<br>
<button type="submit" class="btn btn-primary" id="submit" name="submit">submit</button>
</form>
A validação acima funciona corretamente. E seString1
não é capturado na forma doPOST
O método NÃO é chamado e a mensagem de erro é mostrada no lado do cliente.
Em seguida, uso o seguinte jquery, pois gostaria de capturar todos os envios de formulários e fazer alguma lógica adicional:
$(".allforms").submit(function (e) {
e.preventDefault();
var self = this;
$.ajax({
processData: false,
contentType: false,
data: new FormData(this),
type: $(this).attr('method'),
url: $(this).attr('action'),
success: function (data) {
//other logic
}
});
return (false);
});
Essa função jquery funciona e chama meu método de controlador quando o botão é clicado. No entanto, quandoString1
não é capturado e o envio é clicado, a validação entra em ação e mostra a mensagem de erro, mas a função jquery ainda POSTA o formulário.
Como evito que a função jquery não chame o método ajax se os campos de validação existentes falharam?
Não há necessidade de fazer minha própria validação, pois a mensagem de validação está sendo mostrada na tela. Eu só preciso impedir o envio
A única coisa que encontrei no meu formulário são os campos de validação individuais, por exemplo
<span class="text-danger field-validation-valid" data-valmsg-for="String1" data-valmsg-replace="true"></span>
e o formulário tem apenas onovalidate=novalidate
tag que ojquery.validate.js
adiciona a todos os formulários nos quais está ativado.