jquery validate 需要点击两次提交才能提交表单

Question

我有一个模态表单，用户必须完成表单（否则验证将显示必填字段错误消息），然后单击提交输入类型，它什么也不做，然后他们再次单击它，然后它会通过 ajax 发布，并返回“谢谢”消息。

我查看了 Stackoverflow 并应用了我遇到的问题的答案，但我仍然无法让它工作。我确实删除了 event.preventDefault();来自它，以及 $("#review-form").submit(function(event) { 并且表单在单击提交输入一次后按应有的方式提交，但它不会发布到数据库。

下面是#review-form的jQuery

$("#review-form").validate({
    submitHandler: function () {
        $("#review-form").submit(function (event) {
            var rating = $(this).find('input[name=rating]');
            // var rating = $(this).find('input[name=rating]').val();
            var review = $(this).find('textarea[name=review]');
            var form_settings = $(this).find('input[name=form_settings]');
            var xid = $(this).find('input[name=XID]');
            var entry_id = $(this).find('input[name=entry_id]');
            var entry_type = $(this).find('input[name=entry_type]');
            var site_id = $(this).find('input[name=site_id]');
            var first_name = $(this).find('input[name=first_name]');
            var middle_initial = $(this).find('input[name=middle_initial]');

            $.ajax({
                url: $("#review-form").attr("action"), //your server side script
                data: $(this).serialize(),
                type: 'POST',
                success: function (data) {
                    //$('#response').append('<li>' + data + '</li>');
                    $('#review-form').hide();
                    $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
                },
                error: function (jxhr, msg, err) {
                    $('#response').append('<li style="color:red">' + msg + '</li>');
                }
            });
            event.preventDefault();
        });
    }
});

更新：我删除了 $("#review-form").submit(function (event) { });我更改了 $(this).find ...并通过指定表单的#form-review id 进行检索，然后通过 data 参数。我注释掉了所有单独的变量，只是将 $(this).serialize() 传递给 data 参数，但这不起作用。

下面的代码在 chrome 和 firefox 中工作，但在 firefox 中，它会关闭模式并重定向到域的主页，它应该保持模式打开并带有感谢消息，就像在 chrome 中一样：

$("#review-form").validate({
    submitHandler: function() {

         $.ajax({
             url: $("#review-form").attr("action"), //your server side script
             data: $("#review-form").serialize(),                
             type: 'POST',
             success: function (data) {
                 $('#review-form').hide();
                 $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
             },
             error: function (jxhr, msg, err) {
                 $('#response').append('<li style="color:red">' + msg + '</li>');
             }
         });

        event.preventDefault(); 
    }
});

最终的工作产品：

$("#review-form").validate({
    submitHandler: function() {

         $.ajax({
             url: $("#review-form").attr("action"),
             data: $("#review-form").serialize(),
             type: 'POST',
             success: function (data) {
                 $('#review-form').hide();
                 $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>");
             },
             error: function (jxhr, msg, err) {
                 $('#response').append('<li style="color:red">' + msg + '</li>');
             }
         });
    }
});

Answer 1

这就是我处理远程验证的方式。

    if (form.find('[data-val-remote]').length > 0) {
        form.find('[type="submit"]').on("click enter", function (evt) {
            var interval = setInterval(function () {
                // keep check if there are any remote pending then prevent submit button from click
                if (Object.keys($('form').validate().pending).length) { 
                    evt.preventDefault();
                } else {
                 // if all remote responded then check form valid or not
                    if (!form.valid()) {
                 // if isvalid then stop interval
                        clearInterval(interval);
                    }
                 // if form valid then submit and stop interval
                    form.submit();
                    clearInterval(interval);
                }
            // loop 100ms
            }, 100);
            return false;
        });
    }

Answer 2

我遇到了同样的问题，并通过在我的验证中添加以下内容来解决它：

$("#myform").validate({
  onfocusout: false
});

onfocusout 将从您的表单字段中移除焦点，提交按钮将在第一次点击时起作用。

在https://jqueryvalidation.org/validate/查看更多信息

Answer 3

您在插件的submitHandler 回调中绑定了一个新的submit 事件处理程序。此处理程序不会立即触发，因为提交事件已在进行中。

你不需要它。 submitHandler 回调已经在插件代码内部preventDefault

删除这个

$("#review-form").submit(function(event) { })

并将其包含的所有代码直接保存在submitHandler中

由于您对数据使用serialize()....您也不需要创建的所有单个字段变量