实现 onSubmit 事件后 Jquery Unobtrusive 验证丢失答案

【问题标题】：Jquery Unobtrusive validation lost after implementing onSubmit event实现 onSubmit 事件后 Jquery Unobtrusive 验证丢失
【发布时间】：2011-09-27 06:21:00
【问题描述】：

我正在使用 ASP.NET MVC。在我将事件附加到表单的 onSubmit 事件之前，我的验证运行良好。

这是我的表单的外观：

@using (Html.BeginForm("Recover", "Auth", FormMethod.Post, new { Id = "RecForm", onSubmit = "return Events.Submit(this,event)" }))
{
        @Html.TextBoxFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
        <input type="submit" value="Recover" />
}

Javascript（工作正常，只需将其放在这里，以便您检查其中是否有某些内容导致验证不触发）：

//Events
window.Events = (function () {

    // Baseline setup
    var Events = {};

    function disableAllChildren(el) {
        $(el).find(':input').attr('disabled', true);
    }
    function enableAllChildren(el) {
        $(el).find(':input').attr('disabled', false);
    }

    //Ajax submit
    Events.Submit = function (el, event) {
        event.preventDefault();
        //serialize the form before disabling the elements.
        var data = $(el).serialize();

        disableAllChildren(el);
        $(el).find('.success, .error').hide();
        $.ajax({
            url: el.action,
            type: 'POST',
            data: data,
            success: function (data) {
                //Stuff happens.
            }
        });
    };
    return Events;
})(this, this.document);

我如何取回我的验证？

【问题讨论】：

Events.Submit 不会完全覆盖提交处理程序，使 ASP.NET 退出循环吗？

标签： jquery asp.net-mvc asp.net-mvc-3 jquery-validate unobtrusive-validation

【解决方案1】：

我所做的是在提交之前检查表单是否有效。请看以下代码：

$form = $("#myForm");

if (form.valid()) {

    form.validate();
    //other codes here

 }

如果表单有效，则发布您的数据。如果没有，什么也不做。

【讨论】：

您的 $(el).valid() 有效。无论如何，检查中的 form.validate() 有什么意义？

【解决方案2】：

您的代码中存在比验证更多的问题。情况是 disabled 字段不会发布到服务器。他们也不参与验证。因此，即使您的代码有效，您也不会收到任何发布到服务器端的信息。删除 disableAllChildren(el); 或将其重新编码为不禁用字段，但可能将它们设为只读。

这样，他们将得到验证，但不足为奇的是在 ajax 提交之后。这是您不希望出现的行为，因此请查看validate method。特别是你应该对它感兴趣的部分

有效时通过 Ajax 提交表单。

我相信通过验证的方式提交表单 ajax 可以更轻松地完成。

$(".selector").validate({
   submitHandler: function(form) {
    $(form).ajaxSubmit();
   }
})

或者，只需在 ajax 提交之前添加验证检查

【讨论】：

这就是为什么我在禁用之前将表单序列化为数据变量。