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

Question

我正在创建一个 MVC 3 Web 应用程序。我想在我的实体类上使用数据注释，然后在发回服务器之前使用不显眼的客户端验证。这在制作常规帖子时效果很好。如果任何字段无效，我会得到验证和验证摘要。但是，我想通过 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

重要！！：

Paul 的解决方案是问题的正确答案，而不是 Rob 博士的解决方案。

虽然你可以只使用 valid() 而不是 validate().form()。

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

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

我认为这需要澄清，否则问题的真正答案会被混淆。

Answer 5

$(YourForm).data('unobtrusiveValidation').validate()

Answer 6

        if(!$('#myform').data('unobtrusiveValidation').validate())
        {
           // add your extra custom logic
        } 
        else
        { 
             $('#myform').submit(); 
        }

它触发验证并返回一个布尔值，因此您可以在提交前检查。

Answer 7

.Valid() 有效。即它告诉您您的表格是否有效。然而，单独它无助于正确显示和隐藏消息。这是我的手动验证方法

function validate()
        {
            //valid() not only tells us whether the form is valid but 
            //also ensures that errors are shown !!!
            if ($("form").valid())
            {
                //if the form is valid we may need to hide previously displayed messages
                $(".validation-summary-errors").css("display", "none");
                $(".input-validation-error").removeClass("input-validation-error");
                return true;
            }
            else
            {
                //the form is not valide and because we are doing this all manually we also have to
                //show the validation summary manually 
                $(".validation-summary-errors").css("display", "block");
                return false;
            }
        }

Answer 8

I tried all of the above solutions but none worked on MVC5. 

我正在使用 jQuery v2.1.4 和 jQuery.Validation v1.11.1。 我需要在页面渲染时触发验证。只有以下一种对我有用。

$(document).ready(function () {
   ...
   validateForm();
}

function validateForm() {`enter code here`
    var elem = document.getElementById('btnSave');
    elem.click();    
}

$('#btnSave').click(function (evt) {
    //evt.preventDefault();
    var form = $('form');
    if (form.valid()) {
        //Ajax call here
    }
    //$(".validation-summary-errors").css("display", "block");
});

function Validate() {
    // If no group name provided the whole page gets validated
    Page_ClientValidate();
}