2

私が経験している問題を解決するためのヒントが欲しいのですが、2つの関数があります。1つはフォームを検証し、2つ目はPHPファイルへの投稿です。

問題は、フォームが検証される前に送信されていることです。これらの2つの機能を組み合わせることが可能かどうか、つまり、最初に検証し、フォームの送信に対してすべてが正しい場合にのみ可能かどうか疑問に思います。誰もが方法を知っていますか？

検証機能

$(document).ready(function() {

$('#singup-form').validate(
        {
            rules: {
                user_name: {
                    minlength: 3,
                    required: true
                },
                user_email: {
                    required: true,
                    email: true
                },
                user_password: {
                    required: true

                },
                confirmation_password: {
                    required: true,
                    equalTo: '#user_password'
                },
                user_phone: {
                    number: true,
                    minlength: 8
                },
                user_twitter: {
                    minlength: 3
                },
                agree: {
                    required: true
                }
            },
            highlight: function(label) {
                $(label).closest('.control-group').removeClass('success').addClass('error');
            },
            success: function(label) {
                label
                        .text('OK!').addClass('valid')
                        .closest('.control-group').removeClass('error').addClass('success');

            }
        });
}); // end document.ready

ファンクションポスト

$('#singup-form-submit').click(function(e) {
$.post("register", {
    user_name: $('#user_name').val(),
    user_email: $('#user_email').val(),
    user_password: $('#user_password').val(),
    confirmation_password: $('#confirmation_password').val(),
    user_ddd: $('#user_ddd').val(),
    user_phone: $('#user_phone').val(),
    user_twitter: $('#user_twitter').val(),
    agree: $('#agree').val()
}, function(data) {

    $('#resultado').html(data);
});
e.preventDefault();
});
4

3 に答える 3

4

これは、2つの関数を組み合わせる方法です（もちろん、2つの関数がすでに正しく動作していると仮定します）。submitHandlerフォームが有効になるまで、火の中には何もありません。ドキュメントによると、これはajax機能を配置する場所です。

ビルトインはsubmitHandler:以下のように使用してください。

$(document).ready(function() {

    $('#singup-form').validate({
        rules: {
            user_name: {
                minlength: 3,
                required: true
            },
            user_email: {
                required: true,
                email: true
            },
            user_password: {
                required: true
            },
            confirmation_password: {
                required: true,
                equalTo: '#user_password'
            },
            user_phone: {
                number: true,
                minlength: 8
            },
            user_twitter: {
                minlength: 3
            },
            agree: {
                required: true
            }
        },
        highlight: function (label) {
            $(label).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function (label) {
            label.text('OK!').addClass('valid').closest('.control-group').removeClass('error').addClass('success');
        },
        submitHandler: function (form) {
            $.post("register", {
                user_name: $('#user_name').val(),
                user_email: $('#user_email').val(),
                user_password: $('#user_password').val(),
                confirmation_password: $('#confirmation_password').val(),
                user_ddd: $('#user_ddd').val(),
                user_phone: $('#user_phone').val(),
                user_twitter: $('#user_twitter').val(),
                agree: $('#agree').val()
            }, function(data) {
                $('#resultado').html(data);
            });
        }
    });

}); // end document.ready

ドキュメントを参照してください：

http://docs.jquery.com/Plugins/Validation/validate#toptions

submitHandler、Callback、Default：デフォルト（ネイティブ）フォームsubmit
フォームが有効なときに実際の送信を処理するためのコールバック。フォームを唯一の引数として取得します。デフォルトの送信を置き換えます。検証後にAjax経由でフォームを送信するのに適した場所。

于 2013-01-19T16:01:26.913 に答える
0

送信コードをクリック イベントにバインドするだけでなく、送信ハンドラーを使用できます。

プラグイン/検証/検証

submitHandler を使用して、独自のフォーム送信を実装します。アヤックス経由。

$("#myform").validate({
 submitHandler: function(form) {
   form.submit();
 }
});
于 2013-01-19T07:26:45.013 に答える