jQuery validate Js 在第一次 Ajax 调用后停止工作答案

【问题标题】：jQuery validateJs stops working after the 1st Ajax calljQuery validate Js 在第一次 Ajax 调用后停止工作
【发布时间】：2018-01-05 15:42:54
【问题描述】：

我有以下 Jquery 验证码：

$("#formObjective").validate({
    messages:
    {
        Statement: 'Value must be provided'
    },
    submitHandler: function (form) {
        try {
            $.post($('form#formObjective').attr('action'), $('form#formObjective').serializeArray())
                .done(function (data) {
                    updateObjectiveGrid('table#objectiveGrid');
                    $('form#formObjective').closest('div').html(data);
                })
                .fail(function (xhr, error, text) {
                    alert(text);
                });
        }
        catch (ex) {
            alert('An error occurred while saving: ' + ex);
        }
    }
}

这是 HTML

    <div id=editor>
@using (Html.BeginForm("Save", "Objective", FormMethod.Post, new { @class = "form", id = "formObjective" }))
    {
        <fieldset>
            <legend>Add Objective</legend>
            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true, "", new { @class = "text-danger" })
            @Html.HiddenFor(model => model.Id)


            <div class="form-group">
                @Html.LabelFor(model => model.Notes, "Notes", htmlAttributes: new { @class = "control-label" })
                @Html.TextAreaFor(model => model.Notes, new { @class = "form-control" } )
            </div>

            <div class="form-group">
                <button type="submit" id="save"  name="action" class="btn btn-primary btn-default">@Html.GlyphIcon("plus") Save Objective</button>
                <button type="button" id="clear" name="action" class="btn btn-warning">Clear</button>
            </div>
        </fieldset>
    }
</div>

现在我面临两个问题。

如果我将 $('').validate({}) 放在 $(document).ready(function(){}) 它只是不起作用，即常规提交发生。如果我把它放在外面，它就可以工作。
如果我动态替换
（相同的形式从服务器呈现并替换现有表单），然后 validate() 只是停止工作并定期回发。

【问题讨论】：

您在 ajax 调用中将 <form> 替换为 id="formObjective"，因此您处理的那个不再存在。你需要使用Event Delegation - $('#editor').on('submit', 'form', function() { ...});

标签： jquery ajax asp.net-mvc jquery-validate

【解决方案1】：

你可以试试这个代码来修复表单提交问题：

$("#formObjective").submit(function(e) {
        e.preventDefault();
    }).validate({
    messages:
    {
        Statement: 'Value must be provided'
    },
    submitHandler: function (form) {
        try {
            $.post($('form#formObjective').attr('action'), $('form#formObjective').serializeArray())
                .done(function (data) {
                    updateObjectiveGrid('table#objectiveGrid');
                    $('form#formObjective').closest('div').html(data);
                })
                .fail(function (xhr, error, text) {
                    alert(text);
                });
             return false;
        }
        catch (ex) {
            alert('An error occurred while saving: ' + ex);
        }
    }
});

【讨论】：

但是您认为原因是什么？如果有一些错误，那么它永远不会起作用。
这个问题来自于使用这个新更新阻止通过验证表单默认提交，您需要从自定义提交处理程序中返回 false，如下所示： $("form").validate({ submitHandler: function( form) { // 在这里做一些事情 return false; } });
直到我在提交处理程序中的 e.preventDefault() 之后调用了 $('').valid() 才起作用。