MVC5 - JQuery Unobtrusive 客户端验证不起作用答案

【问题标题】：MVC5 - JQuery Unobtrusive client-side validation not workingMVC5 - JQuery Unobtrusive 客户端验证不起作用
【发布时间】：2015-09-09 09:05:31
【问题描述】：

我正在开发一个 MVC Web 应用程序（从 MVC4 升级到 MVC5），但我无法让客户端验证正常工作。因此，为了排除问题，我创建了一个默认的空 MVC 应用程序。

不幸的是，我仍然无法正常工作，联系人表单不断提交到服务器，并且由于视图模型无效，因此显示来自服务器的错误消息。

这是我的代码；

Contact.cshtml

@model BLL.DTO.ContactDTO
@{
    ViewBag.Title = "Contact";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

@using (Html.BeginForm("Contact","Home", FormMethod.Post, new {id = "contactform"}))
{
    @Html.LabelFor(x => x.Firstname)
    @Html.TextBoxFor(x => x.Firstname)
    @Html.ValidationMessageFor(x => x.Firstname)

    <input type="submit" value="Verzenden"/>
}

<address>
    One Microsoft Way<br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong> <a href="mailto:Support@example.com">Support@example.com</a><br/>
    <strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>

@*@section scripts {
    <script type="text/javascript">
        $("#contactform").validate({
            debug: false
        });
    </script>    
}*@

ContactDTO.cs

public class ContactDTO : BaseDTO
{
    [Required (ErrorMessage = ErrorConstants.ThisFieldIsRequired)]
    [Display(Name = "Voornaam")]
    [MaxLength(75)]
    public string Firstname { get; set; }

    [Required(ErrorMessage = ErrorConstants.ThisFieldIsRequired)]
    [Display(Name = "Achternaam")]
    [MaxLength(75)]
    public string Lastname { get; set; }

    [Display(Name = "E-mail")]
    [DataType(DataType.EmailAddress)]
    public string Email { get; set; }

    [Display(Name = "Website")]
    public string Website { get; set; }

    [Required(ErrorMessage = ErrorConstants.ThisFieldIsRequired)]
    [Display(Name = "Opmerkingen")]
    [DataType(DataType.Text)]
    public string Comments { get; set; }
}

BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                    "~/Scripts/jquery.validate*"));

bundles.Add(new ScriptBundle("~/bundles/msval").Include(
        "~/Scripts/jquery.validate.unobtrusive.js"));

web.config

<appSettings>
    <add key="webpages:Version" value="3.0.0.0"/>
    <add key="webpages:Enabled" value="false"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>

_Layout.cshtml

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @*@Scripts.Render("~/bundles/jqueryval")*@
    @Scripts.Render("~/bundles/msval")

    @RenderSection("scripts", required: false)
</body>

正如您可能在代码片段中看到的那样，我也尝试过 jquery.validate.js，但这也不起作用。我更喜欢使用默认的非侵入式验证，但不幸的是它一直将表单提交给服务器。我还阅读了其他几个主题（this 和 this），虽然问题看起来很相似，但它并没有解决我的问题。这可能是什么..？

【问题讨论】：

您需要 validate 和 validate-unobtrusive。如果您只包含~/bundles/jqueryval，就会发生这种情况，因为它的掩码也与query.validate.unobtrusive 匹配。如果您包含两个捆绑包，那么使用它们当前的掩码，您将包含 unobtrusive 两次。
你的控制器在哪里？
您还需要向我们展示您的控制器，以便我们知道您是否处理了传递给视图的模型是否有效。
取消评论 @Scripts.Render("~/bundles/jqueryval") 所以它包含并注释掉 @Scripts.Render("~/bundles/msval")
@GSerg，就是这样。现在似乎在我的测试应用程序中工作了。对普通应用程序进行相同的更改

标签： jquery asp.net asp.net-mvc unobtrusive-validation asp.net-mvc-5.2

【解决方案1】：

在我的情况下，由于我的类库命名空间和默认模型命名空间不匹配，验证不起作用，因此验证不起作用。我已经纠正了它，现在它工作正常。

【讨论】：