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

I'm new to AJAX and used the code from this SO answer here jQuery Ajax POST example with PHP to integrate with a form on a WordPress site. It works just fine, but i'm having trouble integrating it with jquery validation

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

I tried placing the javascript from the page above into the submitHandler function below

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

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

My form validates on the first click. Then if i type into the input and submit nothing happens, I have to click a second time for the form to submit properly with AJAX. Below is a jsfiddle. Any help is appreciated thanks.

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

A jsfiddle of my code thought it'll log an error to console since form.php isn't linked

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

3 个解决方案

#1

The job of the submitHandler is to submit the form, not to register a form submit event handler.

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

The submitHandler is called when the formm submit event is triggered, in your case instead of submitting the form you were registering a submit handler so when the form submit event is triggered for the first time the form is not submitted. when it is fired for the second time first the submit event is processed by the validator then the handler you registered is fired which triggers the ajax request.

在触发formm submit事件时调用submitHandler，在您的情况下，而不是提交您正在注册提交处理程序的表单，以便在第一次触发表单提交事件时不提交表单。当第二次触发它时，验证器首先处理提交事件，然后触发你注册的处理程序，触发ajax请求。

In the submitHandler you just have to sent the ajax request there is no need to register the event handler

在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);
        });

    }
});

#2

Calling $("#add-form").submit(function(){...}) doesn't submit the form. It binds a handler that says what to do when the user submits the form. That's why you have to submit twice: the first time invokes the validate plugin's submit handler, which validates the data and runs your function, and the second time invokes the submit handler that you added the first time.

调用$（“＃add-form”）。submit（function（）{...}）不提交表单。它绑定一个处理程序，该处理程序说明当用户提交表单时要执行的操作。这就是你必须提交两次的原因：第一次调用validate插件的提交处理程序，它验证数据并运行你的函数，第二次调用你第一次添加的提交处理程序。

Don't wrap the code inside .submit(), just do it directly in your submitHandler: function. Change:

不要将代码包装在.submit（）中，只需在submitHandler：函数中直接执行即可。更改：

var $form = $(this);

to:

至：

var $form = $(form);

You don't need event.PreventDefault(), the validate plugin does that for you as well.

你不需要event.PreventDefault（），validate插件也可以为你做这件事。

#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);
        });            

    }
});