asp.net mvc - needs - ¿Por qué a<form> se le otorga el atributo NoValidate?
novalidate ionic (4)
Desde un escaneo rápido y la lectura de comentarios anteriores, me doy cuenta de que si tiene el atributo data-val=true en cualquiera de los elementos del formulario, la propiedad novalidate se insertará automáticamente en jquery.validate .
Esto tiene sentido porque si está utilizando esos atributos, entonces hay algo que no pretende pasar por la validación, de ahí el atributo novalidate; sin embargo, al leer sobre la propiedad html5 novalidate en w3schools, puede sobrescribir el novalidate predeterminado; el nuevo script jquery.validate debe tener esto en cuenta.
Creo que ese es el flaco, hazme saber si alguien está de acuerdo.
Tener problemas para obtener el complemento de jQuery Validate para jugar bien.
Modelo
public class FooVM
{
[Required]
public string Name { get; set; }
}
Diseño
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="@Url.Content("~/scripts/jquery-1.9.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/jquery-migrate-1.0.0.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/scripts/bootstrap.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/content/bootstrap-responsive.min.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/content/bootstrap.min.css")" rel="stylesheet" type="text/css" />
<title>@ViewBag.Title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">idoneit</a>
<ul class="nav">
<li class="menu-link">@Html.ActionLink("Home", "index", "bar")</li>
</ul>
</div>
</div>
</div>
<div class="span12 error-container">
</div>
<div class="span12 main-body">
@RenderBody()
</div>
</div>
</div>
</body>
</html>
Ver
model bootstrapvalidate.Models.FooVM
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm("add", "bar", FormMethod.Post, new { @class = "form-horizontal" }))
{
<fieldset>
@Html.ValidationSummary()
<legend>Testing Bootstrap & Validate</legend>
<div class="control-group">
<label for="Name" class="control-label">Name</label>
<div class="controls">
@Html.TextBoxFor(x => x.Name)
</div>
<button type="submit" class="btn">Add!</button>
</div>
</fieldset>
}
Cuando lo envío, el mensaje de error se muestra brevemente y, a continuación, el formulario se publica de todos modos.
Una cosa que he notado que no he visto antes es que el marcado contiene el atributo ''novalidate''
<form action="/bar/add" class="form-horizontal" method="post" novalidate="novalidate">
De los bits que he leído, este es un atributo HTML5 que impide la validación. Así que sí, esto es lo que lo está causando, supongo.
La pregunta es: ¿por qué el bejesus se está agregando al formulario? ¡No lo he pedido!
edit: hice un poco de excavación basado en la respuesta de @rob, parece que jquery validate está lanzando una excepción, de ahí la devolución de datos ...
esto es jquery.validate 1.10
El atributo novalidate es agregado por jquery.validate línea 32:
// Add novalidate tag if HTML5.
this.attr(''novalidate'', ''novalidate'');
Si está utilizando HTML5, elimine el atributo :
$("#contactForm").validate();
$("#contactForm").removeAttr("novalidate");
En su web.config , asegúrese de tener:
<appSettings>
...
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
También asegúrese de que no están comentados.
Esta fue realmente una pregunta mal formulada por mi parte, creo.
Esencialmente, el problema no era el atributo de novalidation en absoluto (como dijo @robasta).
No pude obtener jQuery 1.9 y jQuery.Validate 1.10 para jugar bien. Cambiar de nuevo a jQuery 1.83 lo solucionó de inmediato, todo funcionaba como esperaba.
cambio
// Add novalidate tag if HTML5.
this.attr(''novalidate'', ''novalidate'');
a
// Add novalidate tag if HTML5.
if (typeof (Worker) !== "undefined") { this.attr(''novalidate'', ''novalidate'');