Validate.unobtrusive和验证jQuery库

Question

我正在构建一个MVC 3应用程序，它使用标准的Model验证属性进行基本客户端和服务器验证。不过，我也有一个表单，它位于标头中，并使用jQuery验证插件来执行客户端验证。

当我向项目中添加不显眼的库时，使用验证插件的标头表单无法运行并不断发布。当不包含非突出库时，标头会验证得很好，但是模型验证就停止了。

知道我做错了什么吗？

编辑

基本上，我在标题中有一个登录表单。我也有一个登录页面，也允许登录。登录页面绑定到一个Model，但是头中的表单不是，它只是html。这两种表单都通过jQuery .ajax调用相同的Controller/Action。

我已经失去了使用.ajax方法的能力，这个方法似乎没有被调用，因为我包含了一个不引人注意的库。

我得到了您所包含的代码来工作，但是在验证完成后，我仍然不能发布或执行操作。

我的标题表格是：

<form id="frmHeaderLogin" action="">
<table id="LoginBox" title="Login">
    <tr>
        <td>UserName</td>
        <td><input type="text" id="Username" name="Username" /></td>
    </tr>
    <tr>
        <td>Password</td>
        <td><input type="password" id="Password" name="Password" /></td>
    </tr>
    <tr>
    <td colspan="2"><input type="submit" value="Login" id="btnHeaderLogin" name="btnHeaderLogin" /></td>
    </tr>
</table>
</form>

提交按钮有一个单击事件，它将验证客户端输入，然后在创建JSON对象作为数据参数后将其提交给服务器。来自服务器的响应也是一个JSON对象。此表单位于布局文件中，因为它将出现在每一页上。

主登录页/视图有一个简单的表单如下：

@using (Html.BeginForm("Login", "Account", FormMethod.Post, new { id = "MainLoginForm" }))
{
<div>
    <fieldset>
       <p style="color:Red;font-size:medium">@ViewData["Message"]</p>
        <legend>Login</legend>
        <div class="editor-label">
        @Html.LabelFor(m => m.UserName, "EmailId")
        </div>
        <div class="editor-field">
        @Html.TextBoxFor(m => m.UserName)
        @Html.ValidationMessageFor(m => m.UserName)
        </div>
        <div class="editor-label">
        @Html.LabelFor(m => m.Password, "Password")  
        </div>
        <div class="editor-field">         
        @Html.PasswordFor(m => m.Password)
        @Html.ValidationMessageFor(m => m.Password)
        </div>
        <p>
        <input type="submit" id="btnMainLogin" value="Login" />
        </p>
     </fieldset>
</div>
}

这也有一个jQuery单击事件，它触发.ajax方法并向服务器发布一个JSON对象，如上面所示。这两个实例都返回一个JSON对象。

在这一点上，我想问题可能是，我是否可以使用相同的模型对标题登录，它是在一个布局文件，将允许我使用客户端和服务器验证？

下面是我在验证通过后使用的submitHandler示例(使用jquery.validate)

    $("#formname").validate( {
     // .....
         // .....
         submitHandler: function () {
            var JSONData = new Object();
            $(':text, :password', $("table[id$='LoginBox']")).each(function () {
                JSONData[$(this).attr("id")] = $(this).val();
            });

            $.ajax({
                type: "POST",
                url: "/Controller/Action",
                data: "{'Login': '" + JSON.stringify(JSONData) + "'}",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {
                    var response = $.parseJSON(result);
                    alert("Header Login Success!");
                },
                error: function (xhr, status, error) {
                    alert(xhr.statusText + " - ReadyState:" + xhr.readyState + "\n" + "Status: " + xhr.status);
                }
            });
         }
    )};

Answer 1

如果要将Microsoft不显眼的验证脚本与您在同一页中编写的自定义jquery验证规则混合使用，则需要将jquery验证规则添加到现有的表单元素中。让我们举一个例子：

public class MyViewModel
{
    [Required]
    public string Foo { get; set; }

    public string Bar { get; set; }
}

主计长：

public class HomeController : Controller
{
    public ActionResult Index()
    {
        return View(new MyViewModel());
    }

    [HttpPost]
    public ActionResult Index(MyViewModel model)
    {
        return View(model);
    }
}

查看：

@model MyViewModel

<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#Bar').rules('add', {
            required: true,
            messages: {
                required: 'Bar is required'
            }
        });
    });
</script>

@using (Html.BeginForm())
{
    <div>
        @Html.EditorFor(x => x.Foo)
        @Html.ValidationMessageFor(x => x.Foo)
    </div>

    <div>
        @Html.EditorFor(x => x.Bar)
        @Html.ValidationMessageFor(x => x.Bar)
    </div>

    <button type="submit">OK</button>
}

请注意Foo字段上的必需属性是如何使其成为必需的，并且我们已经为Bar字段定义了一个定制的jquery验证规则。

当表单被提交并且两个字段为空时，结果如下：

​

​

当然，您可以在任何字段上定义任意数量的自定义规则。