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

jQuery validate with AJAX in submitHandler, submits on second click?

提问by Anagio

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

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

I tried placing the javascript from the page above into the submitHandlerfunction 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 jsfiddleof my code thought it'll log an error to console since form.php isn't linked

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

回答by Arun P Johny

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

    }
});

回答by Barmar

Calling $("#add-form").submit(function(){...})doesn't submit the form. It binds a handler that says what to do whenthe 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(){...})不会提交表单。它绑定了一个处理程序，说明当用户提交表单时要做什么。这就是您必须提交两次的原因：第一次调用验证插件的提交处理程序，它验证数据并运行您的函数，第二次调用您第一次添加的提交处理程序。

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()，验证插件也为你做。

回答by suhailvs

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

    }
});