2016-11-11 31 views
2

コンタクトフォーム7フォームの送信ボタンをクリックすると、ページがバリデーションメッセージセクションにスクロールされます。お問い合わせフォーム7バリデーショントリガーイベント

私のアプローチ:

私は送信ボタン用と検証メッセージセクションにページをスクロールクリックでjQueryのon clickイベントを使用しています。

私はそれが正しくないと確信しています。クリックするとセクションにスクロールしますが、メッセージはまだajaxには届いていません。

したがって、連絡先フォーム7で検証が行われたときにイベントを作成し、そのフォームを使用してスクロールダウンする方法があります。

+0

あなたは正しいことではないでしょうjsの@MarkWilson –

+0

の機能をsetTimeoutを使用することができます。時間はフォーム –

答えて

1

お問い合わせフォーム7の場合、wpcf7:invalidがトリガーされます。あなたはこのトリガーを使用することができます。

$(window).on('wpcf7:invalid', function() { 
    // let's scroll 
}); 

出典:https://github.com/wp-plugins/contact-form-7/blob/master/includes/js/scripts.js(ライン:109)

+0

を提出するために異なる可能性があります、ここで働いていない。これらのイベントトリガーはまったく動作せず、完全に文書化されていません。 –

+0

上記の109行目にリンクされているソースコード(IMOのベストドキュメント)に見られるように、引き金はまだそこにあります。それでも動作するはずです。 –

+0

奇妙な - 私はこのフォーマットをまったく動作させることができませんでした。私はここに見られるDOMイベントを使用しなければならなかった:https://contactform7.com/dom-events/。ソースコードは、開かれたIkeaボックスを見るのと同じ方法でドキュメントです) –

0

これはあまりにも仕事をしていません。誰かが興味があれば。

$('.wpcf7-form').ajaxComplete(function(){  
     if($(this).hasClass('invalid') || $(this).hasClass('sent')){ 
      $('.forkit-curtain').animate({ 
       scrollTop: $(".wpcf7-response-output").first().offset().top + 100 
      }, 2000); 
     } 
    }); 
0

このトピックに関するさまざまな回答を考えてみると、プラグインの開発者は、これがどのように5分ごとに動作するかについて心を変えているようです。現在、(Q1 2017)、これは加工方法である:

document.addEventListener('wpcf7invalid', function(event) { 
    alert("Fire!"); 
}, false); 

、有効なイベントは以下のとおりです。

  • wpcf7invalid - Ajaxのフォーム送信が正常に を完了しましたが、メールはしていない時に火災を の入力が無効なフィールドがあるため送信されました。
  • wpcf7spam - 火災Ajaxフォームの提出が が正常に完了しているが、可能 スパム活動が検出されたためメールが送信されていません。
  • wpcf7mailsent - Ajax フォーム提出が正常に完了してメールが送信されたときに起動します。
  • wpcf7mailfailed - Ajaxフォームの提出が完了したときに発生します。 正常にメールを送信できませんでした。
  • wpcf7submit - 火災 Ajaxフォームの提出が正常に完了したときに、 のその他のインシデントに関係なく発生します。

ソース:https://contactform7.com/dom-events/

関連する問題