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

IT技术 javascript jquery asp.net-mvc validation asp.net-mvc-3
2021-02-22 14:56:06

我正在创建一个 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
    });
6个回答

尝试：

//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它会自动为您处理。

@Paul-经过大量搜索，终于从您的回答中得到了解决方案。:)
2021-04-23 14:56:06
正如我在下面的评论中提到的 - 如果您没有通过返回 false 来明确处理提交操作的取消，那么在 click 中执行 ajax 调用可能会导致提交调用胜过 ajax 调用......这意味着该解决方案需要两个函数写而不是一个...
2021-04-26 14:56:06
@DrRob，您永远不应该返回 false，您应该将 jQuery 事件捕获为参数并调用 preventDefault()。如果您的点击处理程序使用 return false 来阻止浏览器导航，则解释器可能无法到达 return 语句，浏览器将继续执行锚标记的默认行为。这就是导致您出现问题的原因，而不是因为您使用的是点击与提交。使用 event.preventDefault() 的好处是您可以将其添加为处理程序的第一行，从而保证锚点的默认行为不会触发。
2021-04-27 14:56:06
evt.preventDefault(); 喜欢这个现在一直使用它而不是返回false。
2021-05-12 14:56:06

几天来我一直在谈论 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;
});
调用 preventDefault() 怎么样？
2021-04-30 14:56:06
另一个注意事项，请务必在页面上引用 jquery.validate.min.js 和 jquery.validate.unobtrusive.min.js ，否则您的表单将没有.valid()方法。
2021-05-01 14:56:06
@juhan_h +1 - 完全同意你的看法......我一直忘记这一点;-)
2021-05-01 14:56:06
优秀的解决方案。非常感谢你。在过去的几天里，我正在浪费时间在这个上面。
2021-05-16 14:56:06
-1. 这个答案提出了一个错误的建议。看我下面的帖子。它起作用是因为您将 if 语句 ($("#MyForm).valid()) 包裹在 ajax 调用中，而不是因为您使用了 .submit 而不是 .click。使用两者都没有问题！
2021-05-18 14:56:06

至少在我的情况下（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/

哇！！我找了这么久。终于偶然发现了这个。非常感谢！
2021-05-02 14:56:06

重要的！！：

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

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

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

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

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

使用 Click 的问题是您仍然必须处理表单中的 Submit 事件。如果您使用 click 事件进行 ajax 调用，如果您不明确处理它，它可能会被 Submit 操作压倒……我的解决方案是，我敢肯定，我没有投票是其中之一回答其他人所做的...正如我在帖子中所说，我花了很多时间试图让 Click 做它不想做的事情，一旦我切换到提交它就解决了“我的”问题。
2021-05-05 14:56:06
@Aejay 我同意。我几乎停止<input type="submit" />在任何使用 Ajax 调用的代码中使用。无论如何，我正在处理 Ajax 调用，无需添加可能提交的问题。只需使用<input type="button" />和处理您想要的任何操作。
2021-05-09 14:56:06
很抱歉用这篇文章让死者复活，但我想为路人添加一些输入。更明显的问题应该是您不必单击按钮即可提交表单，这会导致跨浏览器出现一些奇怪的行为。如果用户在表单域上按下回车键，浏览器可能会很好地查找提交按钮来触发点击事件。否则，它只会提交没有单击事件的表单，该死的提交按钮。毕竟，如果由于某种原因你有多个提交按钮......它怎么知道应该点击哪个提交？
2021-05-21 14:56:06

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

欢迎使用 Stackoverflow，请添加为什么会这样。
2021-05-12 14:56:06
其它你可能感兴趣的问题
上一篇HTML5 通知在移动 Chrome 中不起作用 下一篇鸭子在 Javascript 中打字