Question

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

我尝试将上面页面中的javascript放入<{1}}函数下面的

submitHandler

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

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

Answer 1

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

    }
});

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

    }
});

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

3 个答案: