MVC3:通过jQuery验证需要复选框吗?

sha*_*non 44 asp.net-mvc jquery jquery-validate

我想在MVC3项目中使用jQuery validate强制我的"同意条款"复选框.我目前从"MS数据注释属性"+"MS MVC3不引人注目的jQuery验证"获得服务器/客户端DRY/SPOT验证.

这是一个独立的测试(由MVC3生成的纯HTML).为什么它不起作用,拜托?运行时,验证确保填写"联系人姓名"字段,但不关心复选框的状态.

<!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>
Run Code Online (Sandbox Code Playgroud)





这篇文章的其余部分只是我的研究笔记.

设置数据注释属性[必需]没有帮助:
http://forums.89.biz/forums/MVC+3+Unobtrusive+validation+does+not+work+with+checkboxes+(jquery+validation)+++ +修复+ +它.

没关系.对于复选框而言,"必需"意味着什么显然是一场我不想涉足的圣战,MS认为他们比jquery团队更了解.在本地强制应该是一个简单的问题:
$("form").validate({ rules: { cbAgreeToTerms: "required" } });

...对?不,因为:
http://blog.waynebrantley.com/2011/01/mvc3-breaks-any-manual-use-of-jquery.html
http://pinoytech.org/question/4824071/microsofts-jquery-验证,不显眼,让-其他-验证跳过验证

什么?这是相当臭的cheezy!(恕我直言,当然.)

现在,我已经试过这个解决方案:
http://itmeze.com/2010/12/checkbox-has-to-be-checked-with-unobtrusive-jquery-validation-and-asp-net-mvc-3/
和它对我不起作用.这位作者在他/她的文章中早先对他们/她的翻译CHECKBOX测试的悬空评论和一些货物使用使得我想知道它是否真的适用于他/她,那么其他伏都教还涉及到什么?

注意我认为JS的最后一个片段相当于清洁剂:
$.validator.unobtrusive.adapters.addBool("brequired", "required"); 这是在上 一篇文章中提出的:
http://forums.asp.net/p/1648319/4281140.aspx#4281140
但请注意作者评论他尚未调试它.它对我来说不起作用,并且在两行之间阅读,我认为他的意思是它对他不起作用?

unobtrusive.js调用docready解析,所以我试着调用它,但它没有帮助我.
$.validator.unobtrusive.parse(document); 我也发现了一些类似的文章,没有人谈论要求任何类型的初始化.也许他们都在本地编辑原始/公共unobtrusive.js?如果我可以提供帮助,我宁愿不这样做,那不就是适配器的用途吗?

我发现堆栈溢出文章,大致相同,以及更复杂的示例:
ASP .Net MVC 3不显眼的自定义客户端验证
执行自定义属性的客户端验证
http://xhalent.wordpress.com/2011/01/27/ custom-unobstrusive-jquery-validation-in-asp-net-mvc-3 /
但是我没有看到任何与我已经尝试过的不同的东西.

这真的适合人们吗?为什么我不能让它为我工作?

sha*_*non 60

我在这里总结了正确工作的源代码,这是源于应用已接受的答案.希望你觉得它有用.

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>
Run Code Online (Sandbox Code Playgroud)

RegistrationViewModel.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; }
}
Run Code Online (Sandbox Code Playgroud)

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;
    }
}
Run Code Online (Sandbox Code Playgroud)

  • 传奇感谢您花时间来解决这个问题!我仍然惊讶于我必须在每个asp.net mvc项目上添加的管道代码的数量! (4认同)

Pau*_*les 32

只需将您的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;
        }                
    });            
} (jQuery));
Run Code Online (Sandbox Code Playgroud)

您实际上并不需要编写自己的适配器,只能使用:

(function ($) {
    $.validator.unobtrusive.adapters.addBool("mandatory", "required");
} (jQuery));
Run Code Online (Sandbox Code Playgroud)

  • 没关系,在急需睡眠之后很明显.它只是直接调用匿名函数.有什么特别的原因,而不是直接调用包含的方法? (2认同)