MVC4中不显眼的客户端验证无法正常工作

use*_*861 11 asp.net-mvc jquery jquery-validate client-side-validation unobtrusive-validation

我有所有脚本的布局页面,如下所示.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Site</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <some custom css>
    <modernizr>
    <script src="~/Scripts/Jquery/jquery-1.9.1.js"></script>
    <script src="~/Scripts/Jquery/jquery-ui-1.10.2.js"></script>
    <script src="~/Scripts/Jquery/jquery.unobtrusive-ajax.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.js"></script>
    <script src="~/Scripts/Jquery/jquery.validate.unobtrusive.js"></script>
    <some custom scripts>
    <bootstrap scripts>
    <knockout scripts>           
</head>
<body>
  @RenderBody()
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

然后我有我的注册表格,如图所示

@model Mysite.Models.Account.Account
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 @using (Html.BeginForm(null, null, FormMethod.Post, new { id = "register" }))
{
 @Html.AntiForgeryToken();
 <h1>Login</h1>
 @Html.ValidationSummary();
 @Html.EditorFor(m => m.Name)
 @Html.EditorFor(m => m.Address1)
 @Html.EditorFor(m => m.Address2)
 @Html.EditorFor(m => m.Phone1)
<input type="button" value="Register" id="btn1" />
}
<script>
var form = $("#register");
 $("#btn1").click(function (e) {
        e.preventDefault();
        $.ajax({
            url: 'http://localhost:3885/Account/Register',
            data: form.serialize(),
            type: 'POST',
            success: function (result) {},
            error: function (req, status, error) {
                function(req, status, error);
            }
        });
    });
</script>
Run Code Online (Sandbox Code Playgroud)

我的帐户模型类如下:

public class Account
{
   public Name name {get; set;}
   public Address Address1 {get; set;}
   public Address Address2 {get; set;}
   public Phone Phone1 {get;set;}
}
Run Code Online (Sandbox Code Playgroud)

其中每个Property也是一个带有自己的EditorTemplates的模型类

public class Name
{
   [Required]
   public string FirstName {get; set;} 
   public string MiddleName {get; set;}
   [Required]
   public string LastName {get; set;}
}
Run Code Online (Sandbox Code Playgroud)

并具有Name.cshtml EditorTemplate如下

<div >
 @Html.TextBoxFor(m=>m.FirstName);
 @Html.TextBoxFor(m=>m.MiddleName);
 @Html.TextBoxFor(m=>m.LastName);
<div>
Run Code Online (Sandbox Code Playgroud)

类似于Address.cshtml和Phone.cshtml

在web.config中: -

<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
Run Code Online (Sandbox Code Playgroud)

单击空表单上的注册按钮,它会执行ajax post to Register [HttpPost] Controller方法.为什么它不给我客户端验证消息我认为它叫做Unobtrusive验证?我也没有在控制台中看到任何错误.

Dr *_*ard 20

提交按钮必须是"submit"类型才能触发jquery验证验证,无论是单独使用jquery插件还是使用不显眼的插件.

所以这会触发验证:

<input type="submit" value="Register" id="btn1" />
Run Code Online (Sandbox Code Playgroud)

但是,由于您已经编写了一些代码来处理按钮单击,因此可能更容易手动触发验证

$("#btn1").click(function (e) {

      e.preventDefault();

      // now trigger the form validation, result is 1 or 0
      var result = $('form').valid();  

      $.ajax(
         // details omitted
      );
});
Run Code Online (Sandbox Code Playgroud)