9

Parsley.js を使用してフロントエンドで検証され、非同期で送信されるフォームを作成しようとしています。フォームは #contactForm と呼ばれ、送信ボタンは #sendData です。空のフォームまたは無効なフォームで送信を押すと、エラーが発生します。無効なフォーム データからの「エラー」アラートが表示されることを期待していますが、代わりに Else 条件が続き、データは contactForm.php によって処理されます。

$(document).ready(function() { 

    // submit data on click and check if valid 
    $('#sendData').click(function(e) { 
        //check if valid with parsley
        var valid = $('#contactForm').parsley ( 'validate' );
        if ( valid === false )
        {
            e.preventDefault();
        }
        else 
        {
            $.post("contactForm.php", $("#contactForm").serialize());       
        }
    });
});

以下の適切な解決策。

4

2 に答える 2

41

コードは次のようになります。

$(function() { 
    $('#contactForm').submit(function(e) { 
        e.preventDefault();
        if ( $(this).parsley().isValid() ) {
            $.post("contactForm.php", $(this).serialize());       
        }
    });
});
  • 送信ボタンをクリックするのではなく、フォーム送信イベントをキャッチしたい。(Enter キーを押すなど、フォームを送信する方法は他にもあります。これはクリックをトリガーしませんが、同様に処理する必要があります。)
  • デフォルトのアクションは常に防止したいと考えています。フォームを Ajax 経由で送信するので、実際には従来の方法で送信したくありません。
  • === false明示的に比較する必要はありません。(フォームが有効な場合、Parsley は真の値を返します。そのまま使用してください。)
  • $(document).ready(function() { ...です$(function() { ...。
  • 中括弧を配置する 1 つの方法に落ち着きます。(JS で最も一般的な規則は「非対称」、つまり{、ステートメントを開始した 1 行にあることです。)
  • あなたのコメントは余計です。(それらはコードが言うことを正確に言うので、必要ありません。)

編集: 古いバージョンの parsely (2.x より前) では、

if ( $(this).parsley('validate') ) {
    // ...
}
于 2013-04-01T07:09:46.820 に答える