jQuery在submitHandler中使用AJAX验证，第二次点击提交？

Question

我是 AJAX 的新手，并在此处使用此 SO 答案中的代码 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 的工作是提交表单，而不是注册表单提交事件处理程序。

在触发 formm 提交事件时调用 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);
        });

    }
});

Answer 2

调用$("#add-form").submit(function(){...}) 不会提交表单。它绑定了一个处理程序，该处理程序说明当用户提交表单时要做什么。这就是为什么你必须提交两次：第一次调用 validate 插件的提交处理程序，它验证数据并运行你的函数，第二次调用你第一次添加的提交处理程序。

不要将代码包装在.submit() 中，直接在submitHandler: 函数中进行。变化：

var $form = $(this);

到：

var $form = $(form);

您不需要event.PreventDefault()，验证插件也可以为您完成。

Answer 3

$("#add-form").validate({
    submitHandler: function (form) {
        var request;
        // bind to the submit event of our 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);
        });            

    }
});