ajax - jQuery 在submitHandler 中使用AJAX 进行验证，第二次单击时提交？

Question

我是 AJAX 新手，并使用了此答案中的代码 jQuery Ajax POST example with PHP与 WordPress 网站上的表单集成。它工作得很好，但我在将它与 jquery 验证集成时遇到问题

我尝试将上面页面中的 JavaScript 放入下面的 submitHandler 函数中

$("#my-form").validate({
  submitHandler: function(form) {
    **js from other page**
  }
});

我的表单在第一次点击时验证。然后，如果我在输入中输入内容并提交，但没有任何反应，我必须再次单击表单才能使用 AJAX 正确提交。下面是一个jsfiddle。如有任何帮助，我们将不胜感激，谢谢。

一个jsfiddle我的代码认为它会将错误记录到控制台，因为 form.php 未链接

Answer 1

submitHandler 的工作是提交表单，而不是注册表单提交事件处理程序。

当触发表单提交事件时，将调用submitHandler，在您的情况下，您不是提交表单，而是注册提交处理程序，因此当第一次触发表单提交事件时，不会提交表单。当第二次触发时，首先提交事件由验证器处理，然后触发您注册的处理程序，从而触发 ajax 请求。

在submitHandler中你只需要发送ajax请求，不需要注册事件处理程序

$("#add-form").validate({
    submitHandler: function (form) {
        // setup some local variables
        var $form = $(form);
        // let's select and cache all the fields
        var $inputs = $form.find("input, select, button, textarea");
        // serialize the data in the form
        var serializedData = $form.serialize();

        // let's disable the inputs for the duration of the ajax request
        $inputs.prop("disabled", true);

        // fire off the request to /form.php

        request = $.ajax({
            url: "forms.php",
            type: "post",
            data: serializedData
        });

        // callback handler that will be called on success
        request.done(function (response, textStatus, jqXHR) {
            // log a message to the console
            console.log("Hooray, it worked!");
            alert("success awesome");
            $('#add--response').html('<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert">×</button><strong>Well done!</strong> You successfully read this important alert message.</div>');
        });

        // callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown) {
            // log the error to the console
            console.error(
                "The following error occured: " + textStatus, errorThrown);
        });

        // callback handler that will be called regardless
        // if the request failed or succeeded
        request.always(function () {
            // reenable the inputs
            $inputs.prop("disabled", false);
        });

    }
});