验证.unobtrusive并验证jQuery库(Validate.unobtrusive and validate jQuery libraries)

 我正在构建一个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);
                }
            });
         }
    )};

I am building an MVC 3 application which uses the standard Model validation attributes for basic client and server validation. I however also have a form which is in the header and uses the jQuery validate plugin to perform client validation.
 
When I add the unobtrusive library to the project the header form which uses the validate plugin fails to run and keeps posting. When the unobtrusive library is not included the header validates fine but then the Model validation stops.
 
Any idea what I am doing wrong?
 
Edit
 
Basically i have a login form in the header. I also have a login page that also allows login. The login page is tied to a Model but the form in the header is not, it's just html. Both forms call the same Controller/Action via jQuery .ajax.
 
I have lost the ability to use the .ajax method which just doesnt seem to get called since I included the unobtrusive library.
 
I got the code you included to work, but then I still cant post or perform an action after validation is complete.
 
My header form is:
 
<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>
 
I have a click event for the submit button which would validate the client input and then submits this to the server after creating a JSON object as the data parameter. The response from the server is also a JSON object. This form is in a layout file as it's going to be on every page.
 
The main login page/view has a simple form as below:
 
@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>
}
 
This also has a jQuery click event which fires the .ajax method and posts a JSON object to the server as above. Both instances return a JSON object.
 
I suppose at this point the question could be, can I use the same model for the header login which is in a layout file which would allow me to make use of the client and server validation?
 
The following is an example of the submitHandler that I was using after the validation passed (using 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);
                }
            });
         }
    )};

原文：https://stackoverflow.com/questions/11187571