0

私のウェブサイトにはさまざまなフォームがあります。Jquery を使用して次のことを行います。

  • テキスト フィールドのいずれかが空白の場合にエラー メッセージを表示する
  • CSS で空白のフィールドを強調表示する
  • ユーザーが入力するまで、フォームの送信を防ぎます。

さまざまなフォームはすべて同じ Jquery スクリプトにリンクしているため、jquery が特定のフォームを参照しないようにする必要があります (そうしないと、フォームごとに異なるスクリプトを作成する必要があります)。

これを行う最善の方法は、入力フィールドをループして入力フィールドをループし、それらが空白かどうかを確認してからevent.preventDefault();を使用することだと思いました。フォームの送信を停止し、addClassを使用してフィールドを強調表示します。

each 関数は機能しますが、preventdefault/addclass は機能しないようです。何が間違っているのかわかりません。これが私のコードです:( JSFiddleバージョン)

$(document).ready(function () {

$('.names').submit(function(){  
          $('.names input[type=text]').each(function(n,element){  
            if ($(element).val()=='') {  
                event.preventDefault();
              alert('Some fields are blank (highlighted in red). Please fill them in');  
              ($element).addClass("error");
              return false;  
            }  
          });  
          return true;  
        });

});

どうすれば動作させることができますか? <p>また、フィールド自体ではなく、入力フィールドの親タグにエラー クラスを適用することは可能でしょうか?

4

1 に答える 1

1

event未定義です。submit-callback でパラメーターをキャッチし、その上で preventDefault を呼び出します。

$(document).ready(function () {
    $('.names').submit(function (e) {
        $(this).find('input[type=text]').each(function (n, element) {
            if ($(element).val() == '') {
                e.preventDefault();
                alert('Some fields are blank (highlighted in red). Please fill them in');
                $(element).parent().addClass("error");

                return false;
            }
        });

        return true;
    });
});

ご了承ください：

  1. ($element)も未定義です$(element)。
  2. エラー クラスを親に追加するには、 を使用します$(element).parent()。
  3. 複数のフォームがある場合、これは機能しません。$(this).find('input[...]')の代わりに使用し$('.names input[...]')ます。この方法では、送信するフォームのみを検証します。
  4. ここに実用的なフィドルがあります。
于 2012-10-25T17:54:06.337 に答える