jQuery在submitHandler中使用AJAX验证,在第二次单击时提交？

Question

我是AJAX的新手,并使用此SO答案中的代码,这里使用PHP的jQuery Ajax POST示例与 WordPress站点上的表单集成.它工作得很好,但我无法将其与jquery验证集成

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

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

我的表单在第一次点击时验证.然后,如果我输入输入并提交没有任何反应,我必须再次单击表单以使用AJAX正确提交.下面是一个jsfiddle.任何帮助表示赞赏谢谢.

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

Answer 1

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

触发formm submit事件时会调用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);
        });

    }
});