4

Ajax リクエストを使用してフォームを php スクリプトに送信する前に、フォームを検証しようとしています。私はstackoverflowを調べましたが、機能するものは見つかりませんでした。

3 つの入力と送信ボタンがあります。

<input type="text" name="full-name" id="full-name" value="" placeholder="Full Name" />
<input type="text" name="email" id="email" value="" placeholder="Email" />
<textarea name="message" id="message" value="" rows="8" placeholder="Message"></textarea>
<input type="submit" id="contact-submit" class="contact-submit" value="Submit">
<div id="messageResponse" class="center" style="display:none;"></div>

$(document).ready(function() {

    function validator(){
        return $('form').validate();
    }

    $('form').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            dataType: 'html',
            type: 'post',
            url: 'mail.php',
            data: $('#contact-form').serialize(),
            beforeSubmit: validator,
            success: function(responseData) {
                $('#contact-submit').remove();
                $('#messageResponse').fadeIn(1000);
                $('#messageResponse').html(responseData);
            },
            error: function(responseData){
                console.log('Ajax request not recieved!');
            }
        });

        // resets fields
        $('input#full-name').val("");
        $('input#email').val("");
        $('textarea#message').val("");
    })
});

これにはプラグインを使用する必要がありますか? 私が欲しいのは、赤い境界線の色で検証する名前、電子メール、およびメッセージだけです。とても頭が痛くて、明日クライアントと会ってサイトを完成させます。有効な解決策が見つからない場合は、質問しません。

私もこれを使ってみました: jQuery Form Validator Plugin

4

2 に答える 2

4

jQuery Validate プラグイン$('form').validate()を参照していますか?

submitその場合、jQuery Validate プラグインに送信イベント ハンドラー コールバック関数が既に組み込まれている場合、ハンドラーを使用する意味はまったくありません。これは、まさにajax を配置することになっている場所です。

Validate プラグインのドキュメントによると、submitHandlerコールバック関数は次のとおりです。

「フォームが有効な場合に実際の送信を処理するためのコールバック。唯一の引数としてフォームを取得します。デフォルトの送信を置き換えます。検証後にAjax を介してフォームを送信する適切な場所です。」

ajax関数が正しいと仮定して、次のコードを試してください。

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your rules and options,
        submitHandler: function (form) {
            $.ajax({
                dataType: 'html',
                type: 'post',
                url: 'mail.php',
                data: $(form).serialize(),
                success: function (responseData) {
                    $('#contact-submit').remove();
                    $('#messageResponse').fadeIn(1000);
                    $('#messageResponse').html(responseData);
                },
                error: function (responseData) {
                    console.log('Ajax request not recieved!');
                }
            });
            // resets fields
            $('input#full-name').val("");
            $('input#email').val("");
            $('textarea#message').val("");

            return false; // blocks redirect after submission via ajax
        }
    });

});

デモ: http://jsfiddle.net/kUX2N/

于 2013-03-03T05:46:04.780 に答える
3

beforeSubmit は、jQuery ajax ではなく、malsup ajaxForm プラグインのオプションです。validator() が true を返す場合にのみ ajax を実行します。

$('form').on('submit', function(e) {
    e.preventDefault();
    if (validator()){
        $.ajax({...});
    }
});

余談:

jQuery に同じものを複数回選択するように要求する複数の行を使用する代わりに、チェーンを使用できます。

$('#messageResponse').fadeIn(1000).html(responseData);

同様に、複数の要素に対して同じことを行う場合

$('#full-name, #email, #message').val("");
于 2013-03-03T02:38:21.870 に答える