MVC4：jQuery Validation Unobtrusive Native 工作不正确

Question

我的 MVC4 Web 应用是基于 Umbraco 7 构建的。我已经安装了以下 nuget 包：

jQuery 1.10.2
jQuery.Validation 1.11.1
jQuery.Validation.Unobtrusive.Native.MVC4 1.1.0.0

不显眼的验证来自这个网站：http://jqueryvalidationunobtrusivenative.azurewebsites.net/Home/GettingStarted

我的观点是这样的：

<form id="frmContact" method="post" action="@Url.Action("ContactForm", "ContactFormSurface")">
<div>
    <label>Full Name</label>
    @Html.TextBoxFor(m => m.FullName, true)
    @Html.ValidationMessageFor(m => m.FullName, "*")
</div>
<div>
    <label>Company</label>
    @Html.TextBoxFor(m => m.Company, true)
    @Html.ValidationMessageFor(m => m.Company, "*")
</div>
<div>
    <label>Email Address</label>
    @Html.TextBoxFor(m => m.EmailAddress, true)
    @Html.ValidationMessageFor(m => m.EmailAddress, "*")
</div>
<div>
    <label>Message @Html.ValidationMessageFor(m => m.Message, "*")</label>
    @Html.TextAreaFor(m => m.Message, true, 10, 30, new { @class = "input-xl" })
</div>
@Html.ValidationSummary(false, "Please correct the following errors before submitting the message")
<div>
    <button type="submit">Send</button>
</div>
</form>

在 web.config 中：

    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>

我的模特：

public class ContactFormViewModel
{
    [Required, Display(Name = "Full Name")]
    public string FullName { get; set; }

    public string Company { get; set; }

    [Required, Display(Name = "Email Address")]
    [RegularExpression(@"^(?!\.)(""([^""\r\\]|\\[""\r\\])*""|([-a-z0-9!#$%&'*+/=?^_`{|}~]|(?<!\.)\.)*)(?<!\.)@[a-z0-9][\w\.-]*[a-z0-9]\.[a-z][a-z\.]*[a-z]$", ErrorMessage="Not a valid email address")]
    public string EmailAddress { get; set; }

    [Required]
    [DataType(DataType.MultilineText)]
    public string Message { get; set; }
}

这是脚本（我已确认在浏览器中正确加载）

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>

呈现的 HTML 如下所示（在初始页面加载时）：

<form action="/umbraco/Surface/ContactFormSurface/ContactForm" method="post" id="frmContact">
<div>
    <label>Full Name</label>
    <input type="text" value="" name="FullName" id="FullName" data-rule-required="true" data-msg-required="The Full Name field is required." class="input-validation-error">
    <span data-valmsg-replace="false" data-valmsg-for="FullName" class="field-validation-error">*</span>
</div>
<div>
    <label>Company</label>
    <input type="text" value="" name="Company" id="Company">
    <span data-valmsg-replace="false" data-valmsg-for="Company" class="field-validation-valid">*</span>
</div>
<div>
    <label>Email Address</label>
    <input type="text" value="" name="EmailAddress" id="EmailAddress" data-rule-required="true" data-rule-regex="{&quot;pattern&quot;:&quot;^(?!\\.)(\&quot;([^\&quot;\\r\\\\]|\\\\[\&quot;\\r\\\\])*\&quot;|([-a-z0-9!#$%&amp;'*+/=?^_`{|}~]|(?&lt;!\\.)\\.)*)(?&lt;!\\.)@[a-z0-9][\\w\\.-]*[a-z0-9]\\.[a-z][a-z\\.]*[a-z]$&quot;}" data-msg-required="The Email Address field is required." data-msg-regex="Not a valid email address" class="input-validation-error">
    <span data-valmsg-replace="false" data-valmsg-for="EmailAddress" class="field-validation-error">*</span>
</div>
<div>
    <label>Message <span data-valmsg-replace="false" data-valmsg-for="Message" class="field-validation-error">*</span></label>
    <textarea rows="10" name="Message" id="Message" data-rule-required="true" data-msg-required="The Message field is required." cols="30" class="input-validation-error input-xl"></textarea>
</div>
<div data-valmsg-summary="true" class="validation-summary-errors"><span>Please correct the following errors before submitting the message</span>
        <ul>
            <li>The Full Name field is required.</li>
            <li>The Email Address field is required.</li>
            <li>The Message field is required.</li>
        </ul>
    </div>
<div>
    <button type="submit">Send</button>
</div>
</form>

如您所见，验证文本在加载时（在任何按键或表单提交之前）已经处于无效状态。此外，当我提交它提交回服务器的空表单时，客户端验证实际上并没有发生。运行 jQuery 验证脚本，因为 company 字段不是必需的，因此反映在验证消息的类属性中 ('field-validation-valid')

编辑： 控制器代码按要求：

    public class ContactFormSurfaceController: Umbraco.Web.Mvc.SurfaceController
    {
        [HttpGet]
        public ActionResult ContactForm(ContactFormViewModel model)
        {
            return PartialView("ContactForm", new ContactFormViewModel());
        }
    }

有人可以帮我吗？提前致谢。

Answer 1

使用这个新的 Native Unobtrusive 验证，您似乎必须在表单上手动调用 .validate()。

来自Date Demo Example：

$("form").validate({
    submitHandler: function (form) {
        alert("This is a valid form!")
    }
});

或者更简单的例子：

$("form").validate();

我没有这方面的经验，但由于这仅使用 jQuery 验证插件，Documentation 可能值得一读。

这 WORKS 与您生成的 HTML：

请参阅这些小提琴以供参考：

http://jsfiddle.net/4JE62/

http://jsfiddle.net/4JE62/1/

Answer 2

不要使用 validate()，而是使用 valid()

$("#frmId").valid()

记得在你的页面中包含 validate.unobtrusive.js