0

現在、HTML フォームに問題があります。フォームを検証しようとしており (ルールは HTML 5 コードにあります)、$.ajax 呼び出しを使用してそれを php スクリプトに送信して処理します。目的は、送信前にさまざまなフィールドが入力されていることを確認し、追加のエラー (ユーザーが存在する、使用中の電子メール、Web 開発者が無知であるなど) を ajax で出力することです。それ以外の場合、すべてが機能する場合は、フォームを非表示にして確認メッセージを表示することを意図しています。

以下のコードでは、検証は正しく機能しますが、$.ajax 呼び出しは機能しません。フォームのデフォルト アクションが代わりに起動します。ただし、validate 関数とその submitHandler (およびそれらの右中かっこ) をコメント アウトすると、フォーム送信は正常に機能します。私は運が悪いので、数日間これに対して頭をぶつけてきました。誰でも提供できるヘルプや洞察は大歓迎です。

これは私が実行しているJavaScriptです。

<script type="text/javascript">
$(document).ready(function() {

    $("#Submit").click(function() {

        $("#mrf").validate({
            submitHandler: function() {
                    // Begin the submit handler function
                    var action = $("#mrf").attr('action');
                    var msg_success = '<p style="font-weight: bold;">Your registration was successful! You should receive a welcome email shortly.</p>';
                    var form_data = {
                        Surname: $("#Surname").val(),
                        First_Name: $("#FirstName").val(),
                        Other_Names: $("#OtherNames").val(),
                        Address: $("#Address").val(),
                        Suburb: $("#Suburb").val(),
                        State: $("#State").val(),
                        Postcode: $("#Postcode").val(),
                        Email: $("#Email").val(),
                        Username: $("#Username").val(),
                        INSTEP: $("#INSTEP").val(),
                        Mobile: $("#Mobile").val(),
                        Cohort: $("#Cohort").val(),
                        Academy: $("input:radio[name=Academy]:checked").val(),
                        University: $("#University").val(),
                        Program: $("#Program").val(),
                        NonUni: $("#NonUni").val(),
                        Mentoring: $("input:checkbox[name=Mentoring]:checked").val(),
                        CAS: $("input:checkbox[name=CAS]:checked").val(),
                        Motivational_Speaking: $("input:checkbox[name=MotivationalSpeaking]:checked").val(),
                        Workshops: $("input:checkbox[name=Workshops]:checked").val(),
                        Tutoring: $("input:checkbox[name=Tutoring]:checked").val(),
                        Newsletter: $("input:checkbox[name=Newsletter]:checked").val(),
                        is_ajax: 1
                    };

                    $.ajax({
                        type: "post",
                        url: action,
                        data: form_data,
                        success: function(response) {
                            if(response == 'success')   {
                                $("#mrf-form").slideUp('slow', function() {
                                    $("#ajaxResponse").html(msg_success);
                                });
                            }
                            else    {
                                $('#ajaxResponse').html("<p class='error'>" + response + "</p>");
                            }
                        }
                    });
                    // End the submit handler function      
                }
        });

        return false;
    });

});
</script>
4

2 に答える 2

0

これ作って

e.preventDEfault();

関数の最初の行

$("#Submit").click(function(e){});

これにより、少なくともデフォルトの送信イベントは発生しません。次に、上記のすべての行でエラーを確認します。エラーが$.ajax({
ある場合、javascript の実行が中止され、デフォルトの送信関数が呼び出されるため、開発者ツール「F12」を使用してこれを行うことができます
。フォーム データのすべての値が正しく入力されているかどうかを確認します。

于 2012-05-01T09:18:08.113 に答える
0

質問に対する直接的な回答ではありませんが、検証プラグインを使用する方が簡単かもしれません。私はこれを使用してきましたが、非常に満足しています。簡単でありながら拡張可能であり、クライアント側で見栄えがよく、必要に応じて i18n をサポートしています。

http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/

そうは言っても、カスタムコードでそれを行うことを主張する場合は、submitHandler関数を returnにすることをお勧めしますfalse。すでにデータを送信しているため、アクションを起動したくありません。

于 2012-05-01T09:18:25.947 に答える