9

私はAJAXを初めて使用し、この SO answer here 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 が呼び出されます。フォームを送信する代わりに、送信ハンドラーを登録していたので、初めてフォーム送信イベントがトリガーされたときにフォームが送信されません。2回目に発生すると、最初にsubmitイベントがバリデーターによって処理され、次に登録したハンドラーが起動され、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(){...})はフォームを送信しません。ユーザーがフォームを送信したときに何をすべきかを示すハンドラーをバインドします。そのため、2 回送信する必要があります。1 回目は、データを検証して関数を実行する検証プラグインの送信ハンドラーを呼び出し、2 回目は、最初に追加した送信ハンドラーを呼び出します。

コードを 内.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 に答える