jQueryがbeignからフォームを停止しない

Question

私はフォームを提出したときに、フィールドが空であればidを付けて送信を防ぎ、クラスをフィールドに追加します。

何らかの理由で私はそれも働かないようですが、私はフィドルを追加しました、誰かが間違っているところを指摘できますか？

http://jsfiddle.net/yycqW/

Answer 1

あなたのフィドルにはいくつか問題があります。まず、readyイベントハンドラを終了していません。第二に、undefinedであるjQueryに$thisを渡しています。代わりにthisを渡す必要があります。

最後に、実際に送信を停止する必要があるため、フォームは常に送信されます。これを行うには、イベントオブジェクトのpreventDefaultメソッドを呼び出すことができます。

$(document).ready(function(){ 
    $("#form").submit(function(e) { 
     $('input').each(function() { 
      if ($(this).val() == '') { //Pass this into jQuery, not $this 
       $(this).addClass('highlight'); 
       e.preventDefault(); //Stop the form from submitting 
      } 
     });    
    }); 
}); 

はまた、それは、 eachループ内 $(this).val()を使用する必要がありますのでご注意：ここにあなたのコードの新しいバージョンがあります。 thisはDOM要素への参照になり、その要素には valueというプロパティがあるため、単に this.valueを使用すると効率的です。

Answer 2

は、あなたが実際に提出されてからフォームを停止していないので、それはまだ投稿されます（そのため、すぐにハイライトを落とします）。フォームにpreventDefaultメソッドを追加し、エラーを確認した後に手動で送信してください。

Answer 3

preventDefaultを呼び出しているのではなく、thisの代わりに$thisを使用していますが、角かっこは一致しません。バージョンの作業：

http://jsfiddle.net/yycqW/7/

Answer 4

$(document).ready(function() { 
    $("#form").submit(function(e, a) { 
     $('input, textarea', this).each(function() { 
      if (!$(this).val()) { 
       $(this).addClass('highlight'); 
       e.preventDefault(); 
      } else($(this).hasClass('highlight')) ? $(this).removeClass('highlight') : false; // remove class on valid 
     }); 
    }); 
}); 

Answer 5

よりもむしろでpreventDefault（）を、提出されたときにフォームを呼び出す関数にfalseを返すことも、提出を防ぐことができます。前の解答では、複数の空のフィールドがあると思って、preventDefault（）が不必要に複数回起動されると考えてみましょう。

私はクリーンなソリューションとして、このようなものを使用します。

$(document).ready(function(){ 
    $("#form").submit(function(e) { 
      var submit=true; //A flag that we'll return 
      $('input').each(function() { 
       if ($(this).val() == '') { 
        $(this).addClass('highlight'); 
        submit=false //Setting the flag to false will prevent form to be submitted 
       } 
      }); 
      return submit; 
    }); 
});