17

私はbassistance.deのjQueryバリデータープラグイン（1.11）を使用し、php経由で送信します。これで、javacriptコードの最後にある送信ハンドラーにajax呼び出しを追加しましたが、呼び出しが機能せず、firebugコンソールにも存在しません。

ケース1サイトの先頭にajax呼び出しを置くと、機能しますが、バリデータープラグインが表示されなくなります。

ケース2呼び出しを送信ハンドラー内に置くと、それは存在せず、フォームはphpによって送信されます。

ケース3 ページの最後にコードを配置しても、お問い合わせフォームはphpによって送信されます。

これがajax呼び出しです：

$("#contactform").submit(function(e){
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "formfiles/submit.php",
        data: $(this).serialize(),
        success: function() {
            $('#contactform').html("<div id='message'></div>");
            $('#message').html("<h2>Your request is on the way!</h2>")
            .append("<p>someone</p>")
            .hide()
            .fadeIn(1500, function() {
                $('#message').append("<img id='checkmark' src='images/ok.png' />");
            });
        }
     });
     return false;
});

誰かが何が悪いのか知っていますか？

これについて頭を悩ませながら、助けてくれてありがとう。

編集 問題をよりよく理解するために、ここに完全なjavascriptがあります

    $(document).ready(function(){
$("#contactform").validate();      
$(".chapta").rules("add", {maxlength: 0});     



var validator = $("#contactform").validate({

     ignore: ":hidden",
    rules: {
        name: {
            required: true,
            minlength: 3
        },
        cognome: {
            required: true,
            minlength: 3
        },
        subject: {
            required: true,

        },



        message: {
            required: true,
            minlength: 10
        }
    },

    submitHandler: function(form) {



   $("#contactform").submit(function(e){
   e.preventDefault();
   $.ajax({
    type: "POST",
    url: "formfiles/submit.php",
    data: $(this).serialize(),
    success: function() {
        $('#contactform').html("<div id='message'></div>");
        $('#message').html("<h2>Your request is on the way!</h2>")
        .append("<p>someone</p>")
        .hide()
        .fadeIn(1500, function() {
            $('#message').append("<img id='checkmark' src='images/ok.png' />");
        });
    }
    });
    return false;
 });
    },

});

 });

編集2

セレクターと残りのすべては問題ないようです。

 <form action="#n" class="active" method="post" name="contactform" id="contactform">
4

3 に答える 3

37

あなたはjQueryValidateプラグインのコールバック関数内ajaxに属しています。submitHandler

ドキュメントによると、

submitHandler、Callback、Default：デフォルト（ネイティブ）フォームsubmit

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

もう1つの問題は、.validate()2回電話をかけていることです。初めて呼び出された後は、他のインスタンスは無視され、渡そうとしているすべてのルールも無視されます。DOMがフォームのプラグインを初期化する準備ができると、.validate()メソッドは1回呼び出されます。

最後に、コールバック関数submitにハンドラーを配置する必要はありません。submitHandler

デモ：http： //jsfiddle.net/nTNLD/1/

$(document).ready(function () {

     $("#contactform").validate({
         ignore: ":hidden",
         rules: {
             name: {
                 required: true,
                 minlength: 3
             },
             cognome: {
                 required: true,
                 minlength: 3
             },
             subject: {
                 required: true
             },
             message: {
                 required: true,
                 minlength: 10
             }
         },
         submitHandler: function (form) {
             $.ajax({
                 type: "POST",
                 url: "formfiles/submit.php",
                 data: $(form).serialize(),
                 success: function () {
                     $(form).html("<div id='message'></div>");
                     $('#message').html("<h2>Your request is on the way!</h2>")
                         .append("<p>someone</p>")
                         .hide()
                         .fadeIn(1500, function () {
                         $('#message').append("<img id='checkmark' src='images/ok.png' />");
                     });
                 }
             });
             return false; // required to block normal submit since you used ajax
         }
     });

 });
于 2013-03-25T22:12:52.160 に答える
2

DOM（フォーム）が前にロードされていることを確認するために、コードをドキュメントレディコールバックに入れる必要があります。

$(document).ready(function() {
 //Code
});

.submit()から既存のものを削除しsubmitHandler、検証初期化の外側であるが、の内側に配置する必要がありreadyます。次に、あなたの内部で あなたがトリガーsubmitHandlerするだけで、もう一方が解雇されます。form.submit();form.submit();submit

または、に$.ajax直接配置しますsubmitHandler。

今のやり方では、送信ボタンをクリックしたときにのみイベントリスナーを追加します。それは実際には遅くなります。その直後に、フォームはajaxなしで送信されます。

于 2013-03-25T21:38:38.323 に答える
2

容易いものだ。これだけを行う

if ( $( "label.error" ).length===false || $( "label.error" ).is(":visible")===false) {

here set the ajax

}
于 2015-05-27T08:00:21.540 に答える