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

Posted 2023-05-09

【中文标题】jQuery validate Js 在第一次 Ajax 调用后停止工作

【英文标题】：jQuery validateJs stops working after the 1st Ajax call

【发布时间】：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() ...);

【参考方案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() 才起作用。