Validate.unobtrusive并验证jQuery库

Question

我正在构建一个MVC 3应用程序,它使用标准的模型验证属性进行基本的客户端和服务器验证.但是我也有一个表头,它在标题中并使用jQuery validate插件来执行客户端验证.

当我将不显眼的库添加到项目时,使用validate插件的标题表单无法运行并继续发布.当不包含不显眼的库时,标头验证正常,但模型验证停止.

知道我做错了什么吗？

编辑

基本上我在标题中有一个登录表单.我还有一个登录页面,也允许登录.登录页面与模型绑定,但标题中的表单不是,它只是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字段上的Required属性如何使其成为必需,并且我们已为Bar字段定义了自定义jquery验证规则.

这是表单提交并且2个字段为空时的结果:

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