jQuery的使用AJAX在submitHandler验证，提交关于第二次点击？ [英] jQuery validate with AJAX in submitHandler, submits on second click?

问题描述

我是新来的AJAX和利用从这次的code SO回答这里<一href="http://stackoverflow.com/questions/5004233/capture-all-of-the-forms-data-and-submit-it-to-a-php-script-jquery-ajax-post">Capture所有形式的数据，并将其提交到一个PHP脚本 - jQuery的阿贾克斯POST例如以用一个词preSS网站的形式进行整合。它工作得很好，但我无法用jQuery验证集成

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

我试图把的JavaScript从网页上面到下面

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

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

我的窗体上的第一次点击确认。然后，如果我输入到输入并提交什么也没有发生，我必须单击第二次的形式与AJAX正常提交。下面是一个的jsfiddle。任何帮助是AP preciated感谢。

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.

一个的jsfiddle 我的code以为它会记录错误安慰，因为form.php的未链接

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

推荐答案

在submitHandler的工作就是提交表单，不登记表单提交事件处理程序。

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

在formm提交事件被触发，你的情况，而不是提交表单你注册一个提交处理程序，以便当表单提交事件被触发首次表单不提交的submitHandler被调用。当它被触发第二次先提交事件被验证，那么你注册的处理程序被触发，触发Ajax请求处理。

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.

在submitHandler你只需要发送Ajax请求没有必要注册事件处理程序

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

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

    }
});

这篇关于jQuery的使用AJAX在submitHandler验证，提交关于第二次点击？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！