Question

我要求至少完成三个字段中的一个，如果没有，则应该产生验证错误。这变得相当烦人，因为我之前在jQuery中完成过它，并且出于某种原因它根本不适用于这个项目。

实时验证适用于所有其他字段（顺便说一下，我从视图中删除了以便于阅读）但是当我将jQuery验证直接添加到视图中时（如下所示）来设置需求要输入三个中的至少一个，它什么都不做。对表单没有影响，而所有其他字段都得到适当的验证，如电子邮件，密码/确认密码匹配，等等......关于是什么导致这种冲突的任何想法？

我使用的是ASP.NET MVC 4和强大的视图;设置了捆绑/缩小，我已经包含对以下所有内容的引用：

jquery.unobtrusive
jquery.validate 1.11.1
additional-methods 1.11.0
jquery-ui 1.10.4 + base theme
jquery 2.1.0
modernizr

RegistrationViewModel

[DataType(DataType.PhoneNumber)]
[StringLength(25)]
[Display(Name = "Work number: ")]
public string WorkPhone { get; set; }

[DataType(DataType.PhoneNumber)]
[StringLength(25)]
[Display(Name = "Mobile number: ")]
public string MobilePhone { get; set; }

[DataType(DataType.PhoneNumber)]
[StringLength(25)]
[Display(Name = "Home number: ")]
public string HomePhone { get; set; }

_Layout.cshtml

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Test Reg</title>
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryval")
        @Scripts.Render("~/bundles/modernizr")

    </head>
    <body>
        <header>
            <div>
                @RenderBody()
            </div>
        </header>
    </body>
</html>

查看

@model Web.Models.RegistrationViewModel
@{  
    ViewBag.Title = "Registration";
    Layout = "~/Views/Shared/_Layout.cshtml";   
}

<script>
    $(document).ready(function () {

        //Form Submission
        $('#btnSubmit').click(function(obj) {
            var isValid = $("#RegistrationForm").valid();

            if (isValid) {
                obj.preventDefault();
                $('#RegistrationForm').submit();
                return false;
            }
        });

        //JQuery Validation
        $("#RegistrationForm").validate({
            rules: {

                txtWorkPhone: {
                    require_from_group: [1, ".phoneGroup"]
                },
                txtHomePhone: {
                    require_from_group: [1, ".phoneGroup"]
                },
                txtMobilePhone: {
                    require_from_group: [1, ".phoneGroup"]
                }
            }
        });

    });

</script>

@using (Html.BeginForm("Registration", "Account", FormMethod.Post, new { enctype = "multipart/form-data", id="RegistrationForm" }))
{
   @Html.ValidationSummary(true, "Registration failed, please verify that all fields are properly completed.");
   <div>
       <fieldset>
           <legend>Registration</legend>

           <div>
               @Html.LabelFor(p=>p.WorkPhone)
               @Html.TextBoxFor(p=>p.WorkPhone, new {@class="phoneGroup", name="txtWorkPhone"}) 
           </div>
           <div>
               @Html.LabelFor(p=>p.HomePhone)
               @Html.TextBoxFor(p=>p.HomePhone, new {@class="phoneGroup", name="txtHomePhone"})
           </div>
           <div>
               @Html.LabelFor(p=>p.MobilePhone)
               @Html.TextBoxFor(p=>p.MobilePhone, new {@class="phoneGroup", name="txtMobilePhone"})
           </div>

           <input type="submit" value="Register" id="btnSubmit" />
      </fieldset>
   </div> 
}

更新1

在完成已发布的答案后测试了以下代码，并不完全确定如果我正确地进行了此设置，似乎没有，因为它仍然无法正常工作。

 $(document).ready(function () {

        $('#btnSubmit').click(function (obj) {

            $("#RegistrationForm").rules("add", {
                txtWorkPhone: { require_from_group: [1, ".phoneGroup"] },
                txtHomePhone: { require_from_group: [1, ".phoneGroup"] },
                txtMobilePhone: { require_from_group: [1, ".phoneGroup"] },
                messages: {
                    txtWorkPhone: "Enter at least one phone number.",
                    txtHomePhone: "Enter at least one phone number.",
                    txtMobilePhone: "Enter at least one phone number."
                }

            }).validate();


            var isValid = $("#RegistrationForm").valid();

            if (isValid) {
                obj.preventDefault();
                $('#RegistrationForm').submit();
                return false;
            } 
        });

});

Answer 1

两个问题。首先，您的主要问题是，如果验证失败，您将无法提供任何要显示的消息。因此，基本上，即使验证失败，也没有这样的指示。

其次，调用.validate会导致验证发生。由于此处的代码在页面加载时运行，因此表单会立即使用这些附加规则进行验证（可能不是您的意图）。然后，稍后，当用户实际提交表单时，再次运行验证，但是，此部分是密钥，不包括那些规则。相反，它使用Microsoft验证脚本添加的原始规则运行。您没有实际更新规则集，您只是告诉一个特定的验证调用来合并这些规则。

要更新validate所有来电的规则列表，您需要改为使用.rules。

请参阅：http://jqueryvalidation.org/rules

<强>更新

Microsoft自行包含jQuery Validation的一些连接，它包含在jqueryval脚本包中。这将设置默认规则并初始化验证。这意味着，你不必这样做。它还与表单的提交事件有关，因此您也不需要为此做任何事情。

在您的方案中，您需要的所有是为Microsoft已为您设置的默认验证规则添加一些其他规则。此外，rules方法适用于单个字段，而不是表单。这是您准备好文档时需要做的事情：

$(document).ready(function () {
    $("#txtWorkPhone").rules("add", {
        require_from_group: [1, ".phoneGroup"]
    });
    $("#txtHomePhone").rules("add", {
        require_from_group: [1, ".phoneGroup"]
    });
    $("#txtMobilePhone").rules("add", {
        require_from_group: [1, ".phoneGroup"]
    });
});

Answer 2

除了克里斯解决方案，我建议你只写一个 @ Html.ValidationMessage（＆＃34;错误＆＃34;） ..

就像上面的代码块一样，你在VIEW中创建和绑定控件之后的代码就是stogly类型。

此致

需要完成三个文本字段之一，验证不适用于强视图

2 个答案: