为ajax帖子手动调用MVC 3客户端验证

Question

我正在创建一个MVC 3 Web应用程序.我想在我的实体类上使用Data Annotations,然后在回发到服务器之前使用不显眼的客户端验证.这在定期发布时工作正常.如果任何字段无效,我会得到验证和验证摘要.但是,我想通过ajax和json回发信息.如何首先在客户端"手动"验证表单,然后将我的ajax发布回服务器.以下是我的代码的摘要版本.

  public class Customer
    {
        [Required(ErrorMessage = "The customer's first name is required.")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "The customer's last name is required.")]
        public string LastName { get; set; }
    }



    <% using (Html.BeginForm()) { %>

    <%: Html.LabelFor(model => model.FirstName, "First Name")%>
    <%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%>
    <%: Html.ValidationMessageFor(model => model.FirstName, "*")%>

    <%: Html.LabelFor(model => model.LastName, "Last Name")%>
    <%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%>
    <%: Html.ValidationMessageFor(model => model.LastName, "*")%>

    <div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;">
       <a href="#">Save</a>
    </div>

    <%: Html.ValidationSummary(true) %>

    <% } %>

我尝试过这段代码,但它只验证了名字,并没有显示验证摘要.

    $("#CustomerEditSave").click(function () {
        $(form).validate();
        //Ajax call here
    });

Answer 1

尝试:

//using the form as the jQuery selector (recommended)
$('form').submit(function(evt) {
    evt.preventDefault();
    var $form = $(this);
    if($form.valid()) {
        //Ajax call here
    }
});

//using the click event on the submit button
$('#buttonId').click(function(evt) {
    evt.preventDefault();
    var $form = $('form');
    if($form.valid()) {
        //Ajax call here
    }
});

这应该适用于jQuery ajax和MSAjax调用.也可以尝试使用http://nuget.org/packages/TakeCommand.js或https://github.com/webadvanced/takeCommand它会自动为您处理.

Answer 2

几天来,我一直在进行MVC客户端验证:

不要使用.click使用.submit:

$("#MyForm").on('submit',function () {

    if($("#MyForm").valid())
    {
        //Do ajax stuff
    }

    //Return false regardless of validation to stop form submitting
    //prior to ajax doing its thing
    return false;
});

我要添加一个更新,考虑取消事件而不是返回false(或两者都做):

$("#MyForm").on('submit',function (e) {

    if($("#MyForm").valid())
    {
        //Do ajax stuff
    }

    e.preventDefault();

    //Return false regardless of validation to stop form submitting
    //prior to ajax doing its thing
    return false;
});

Answer 3

至少在我的情况下(MVC 5),还需要添加以下代码,否则.valid()将始终返回true:

$(function () {
$(document).ajaxComplete(function(event, request, settings){
    //re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
    $.validator.unobtrusive.parse(document);
});

});

见http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/

Answer 4

重要的！！：

保罗的解决方案是问题的正确答案，而不是罗布博士的解决方案。

尽管您可以只使用 valid() 而不是 validate().form()。

但更重要的是，确实没有理由按照 Rob 博士的建议限制您的代码，即不使用 .click，只使用 .submit。这不是解决问题的方法！解决问题的方法是将 $.ajax(...) 调用包装在 if 语句中。IE：

if($("#MyForm").valid())
{
    //call to $.ajax or equivalent goes in here.
}

我认为这需要澄清，否则问题的真正答案就会变得模糊。