Onsubmitの検証バックグラウンドのフィールドが変更されましたか？

Question

誰でも良いチュートリアル/ Javascriptを使用する方法を知っている、onSubmit、class="required"ですべての空のフィールドの背景色を変更しますか？おそらく、

Answer 1

このような何かは、トリックを行う必要があり、それはあなたがより多くの細部を掲示せずに探している内容を正確に把握することは困難です。

document.getElementById("myForm").onsubmit = function() { 
    var fields = this.getElementsByClassName("required"), 
     sendForm = true; 
    for(var i = 0; i < fields.length; i++) { 
     if(!fields[i].value) { 
      fields[i].style.backgroundColor = "#ff0000"; 
      sendForm = false; 
     } 
     else { 
      //Else block added due to comments about returning colour to normal 
      fields[i].style.backgroundColor = "#fff"; 
     } 
    } 
    if(!sendForm) { 
     return false; 
    } 
} 

このリスナーをid "myForm"という形式のonsubmitイベントに関連付けます。そのフォーム内のすべての要素を「必須」のクラスで取得します（古いバージョンのIEではgetElementsByClassNameがサポートされていないため、その代替方法を検討したい場合があります）、そのコレクションをループし、空のものがあれば背景色を変更します。空白があれば、フォームが送信されないようにします。

ここにはworking exampleがあります。

Answer 2

このような何か：

$(document).ready(function() { 
    $('form').submit(function() { 
     $('input, textarea, select', this).foreach(function() { 
      if ($(this).val() == '') { 
       $(this).addClass('required'); 
      } 
     }); 
    }); 
}); 

Answer 3

私はすぐにjQueryのファンになりました。ドキュメントは素晴らしいです。

http://docs.jquery.com/Downloading_jQuery

あなたはライブラリを試してみることにした場合は、ここにあなたのコードは次のとおりです。

//on DOM ready event 
$(document).ready(
    // register a 'submit' event for your form 
    $("#formId").submit(function(event){ 
    // clear the required fields if this is the second time the user is submitting the form 
    $('.required', this).removeClass("required"); 
    // snag every field of type 'input'. 
// filter them, keeping inputs with a '' value 
// add the class 'required' to the blank inputs. 
    $('input', this).filter(function(index){ 
     var keepMe = false; 
     if(this.val() == ''){ 
     keepMe = true; 
     } 
     return keepMe; 
    }).addClass("required"); 
    if($(".required", this).length > 0){ 
    event.preventDefault(); 
    } 
    }); 
);