jquery - form - validation data annotations in asp net mvc
MVC3: ¿se requiere la casilla de verificación mediante jQuery validate? (3)
He resumido aquí el código fuente que funciona correctamente, que resultó de aplicar la respuesta aceptada. Esperamos que te sea útil.
RequiredCheckbox.aspx
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<RegistrationViewModel>" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title>RequiredCheckbox</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$.validator.unobtrusive.adapters.addBool("mandatory", "required");
</script>
</head>
<body>
<div>
<%
// These directives can occur in web.config instead
Html.EnableUnobtrusiveJavaScript();
Html.EnableClientValidation();
using (Html.BeginForm())
{ %>
<%: Html.CheckBoxFor(model => model.IsTermsAccepted)%>
<%: Html.ValidationMessageFor(model => model.IsTermsAccepted)%>
<%: Html.TextBoxFor(model => model.ContactName)%>
<%: Html.ValidationMessageFor(model => model.ContactName)%>
<button type="submit">Submit</button>
<% } %>
</div>
</body>
</html>
RegistroViewModel.cs
using System;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
public class RegistrationViewModel {
[Mandatory (ErrorMessage="You must agree to the Terms to register.")]
[DisplayName("Terms Accepted")]
public bool isTermsAccepted { get; set; }
[Required]
[DisplayName("Contact Name")]
public string contactName { get; set; }
}
MandatoryAttribute.cs
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Web.Mvc;
public class MandatoryAttribute : ValidationAttribute, IClientValidatable
{
public override bool IsValid(object value)
{
return (!(value is bool) || (bool)value);
}
public IEnumerable<ModelClientValidationRule> GetClientValidationRules(ModelMetadata metadata, ControllerContext context)
{
ModelClientValidationRule rule = new ModelClientValidationRule();
rule.ErrorMessage = FormatErrorMessage(metadata.GetDisplayName());
rule.ValidationType = "mandatory";
yield return rule;
}
}
Quiero que mi casilla de verificación "Acepto los términos" sea obligatoria con jQuery validate, en un proyecto MVC3. Actualmente obtengo la validación DRY / SPOT del servidor / cliente de los "atributos de anotación de datos de MS" + "validación jQuery discreta de MS MVC3".
Aquí hay una prueba independiente (HTML plano generado por MVC3). ¿Por qué no funciona, por favor? Cuando se ejecuta, la validación garantiza que el campo "Nombre de contacto" se complete, pero no le importa el estado de la casilla de verificación.
<!DOCTYPE html>
<html>
<head>
<title>RequiredCheckbox</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.microsoft.com/ajax/jQuery.Validate/1.7/jQuery.Validate.js"></script>
<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
// http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
$.validator.unobtrusive.adapters.add("mandatory", function (options) {
options.rules["required"] = true;
if (options.message) {
options.messages["required"] = options.message;
}
}
});
$.validator.unobtrusive.parse(document);
});
</script>
</head>
<body>
<div>
<form>
<input data-val="true" data-val-mandatory="The field Terms Are Accepted is invalid." id="isTermsAccepted" name="isTermsAccepted" type="checkbox" value="true" />
<input name="isTermsAccepted" type="hidden" value="false" />
<span class="field-validation-valid" data-valmsg-for="isTermsAccepted" data-valmsg-replace="true"></span>
<input data-val="true" data-val-required="The Contact Name field is required." id="contactName" name="contactName" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="contactName" data-valmsg-replace="true"></span>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>
El resto de este post son solo mis notas de investigación.
Establecer el atributo de anotación de datos [requerido] no ayuda:
http://forums.89.biz/forums/MVC+3+Unobtrusive+validation+does+not+work+with+checkboxes+(jquery+validation)+and+the+fix+for+it .
Esta bien. Lo que "requerido" significa para una casilla de verificación es, obviamente, una guerra santa en la que no quiero meterme, donde MS creía que sabían mejor que el equipo de jQuery. Coaccionarlo localmente debería ser una simple cuestión de:
$("form").validate({ rules: { cbAgreeToTerms: "required" } });
...¿Correcto? no, debido a
http://blog.waynebrantley.com/2011/01/mvc3-breaks-any-manual-use-of-jquery.html
http://pinoytech.org/question/4824071/microsofts-jquery-validate-unobtrusive-makes-other-validators-skip-validation
¿QUÉ? Eso es bastante apestoso cheezy! (En mi humilde opinión, por supuesto.)
Ahora, he intentado esta solución:
http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
y no funcionó para mí. Los comentarios colgantes de este autor y el uso un tanto culto a la carga de la prueba CHECKBOX invertida de su artículo anterior me hacen preguntarme si realmente funciona para él, ¿entonces qué otro vudú estaba involucrado?
Tenga en cuenta que creo que el último fragmento de JS es equivalente al limpiador:
$.validator.unobtrusive.adapters.addBool("brequired", "required"); Eso fue sugerido por el último post en:
http://forums.asp.net/p/1648319/4281140.aspx#4281140
Pero note que el autor comenta que todavía no lo ha depurado. No me funcionó, y leer entre líneas, creo que quiere decir que no funcionó para él.
El discreto. Js llama parse en docready, así que intenté llamar eso, pero no me ayudó.
$.validator.unobtrusive.parse(document); También he encontrado algunos artículos similares y ninguno habla sobre la necesidad de inicialización de ningún tipo. Tal vez todos ellos están editando localmente el original / public unobtrusive.js? Preferiría no hacerlo si puedo evitarlo, ¿no es para eso para lo que son los adaptadores?
Encontré artículos de desbordamiento de pila, muy parecidos, así como ejemplos más complejos:
ASP .Net MVC 3 validación de clientes personalizada discreta
Realizar la validación del lado del cliente para el atributo personalizado
http://xhalent.wordpress.com/2011/01/27/custom-unobstrusive-jquery-validation-in-asp-net-mvc-3/
Pero no veo nada que sea diferente a lo que ya he probado.
¿Esto realmente funciona para la gente? ¿Por qué no puedo hacerlo funcionar para mí?
Solo cambia tu javascript a esto:
(function ($) {
// http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
$.validator.unobtrusive.adapters.add("mandatory", function (options) {
options.rules["required"] = true;
if (options.message) {
options.messages["required"] = options.message;
}
});
} (jQuery));
Sin embargo, no es necesario que escriba su propio adaptador y solo puede usar:
(function ($) {
$.validator.unobtrusive.adapters.addBool("mandatory", "required");
} (jQuery));
<asp:Content ID="Content1" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
<h2>
Save New Contact</h2>
<%using (Html.BeginForm("SaveContact", "Contact", FormMethod.Post, new { id = "UserImportTypeForm", @autocomplete = "off" })) %>
<%{ %>
<table style="height: 100px;">
<tr>
<td>
Import Type :
</td>
</tr>
<tr>
<td>
Is Verified
</td>
<td>
<%-- <%=Html.TextBox("UserContactModel.IsVerified", new SelectList(Model.IsVerified, "IsVerified"), new { })%>>--%>
<%-- <input type="text" name="txtIsVerified" id="txtIsVerified" />--%>
<%-- <%= Html.TextBox("txtIsVerified")%>--%>
<%=Html.CheckBox("SelectedUserContact.IsVerified", Convert.ToBoolean(Model.SelectedUserContact.IsVerified) )%>
<%=Html.ValidationSummary("txtIsVerified", "*")%>
</td>
</tr>
<tr>
<td>
First Name
</td>
<td>
<%--<input type="text" name="txtFirstName" id="txtFirstName" />--%>
<%=Html.TextBox ("SelectedUserContact.FirstName", Model.SelectedUserContact.FirstName )%>
<%-- <%=Html.ValidationSummary("FirstName", "*")%>--%>
</td>
</tr>
<tr>
<td>
Last Name
</td>
<td>
<%--<input type="text" name="txtLastName" id="txtLastName" />--%>
<%=Html.TextBox("SelectedUserContact.LastName", Model.SelectedUserContact.LastName)%>
<%=Html.ValidationSummary("LastName", "*")%>
</td>
</tr>
<tr>
<td>
Contact ID
</td>
<td>
<%=Html.TextBox("SelectedUserContact.ContactID",Model.SelectedUserContact.ContactID) %>
<%=Html.ValidationSummary("ContactID","*") %>
</td>
</tr>
<tr>
<td align="right">
<input type="submit" value="Save" name="btnSave" id="btnSave" />
</td>
<td>
<input type="button" value="Cancel" name="btnCancel" id="btnCancel" />
</td>
</tr>
</table>
<%} %>
<script src="../../Scripts/jquery.validate.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$("#UserImportTypeForm").validate({
rules:
{
"SelectedUserContact.FirstName": { required: true },
"SelectedUserContact.LastName": { required: true },
"SelectedUserContact.ContactID": {required:true}
},
messages:
{
"SelectedUserContact.FirstName": { required: "*" },
"SelectedUserContact.LastName": { required: "*" },
"SelectedUserContact.ContactID": { required: "*" },
}
});
</script>
</asp:Content>