9

我是 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 没有链接

4

3 回答 3

12

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

    }
});
于 2013-08-16T04:17:09.707 回答
3

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

不要将代码包装在里面.submit()，直接在你的submitHandler:函数中做。改变：

var $form = $(this);

至：

var $form = $(form);

你不需要event.PreventDefault()，验证插件也可以为你做。

于 2013-08-16T04:17:29.547 回答
2 
$("#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);
        });            

    }
});
于 2013-08-16T04:22:05.493 回答