javascript - 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;
    }
}

これにより、 「myForm」を使用onsubmitしてフォームのイベントにリスナーがアタッチされます。id次に、そのフォーム内のすべての要素を「必須」のクラスで取得し（getElementsByClassNameIEの古いバージョンではサポートされていないため、そこで代替を検討することをお勧めします）、そのコレクションをループし、それぞれの値をチェックし、空の色が見つかった場合は、背景色を変更します。空のものがあると、フォームを送信できなくなります。

これが実際の例です。

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();
   }
  });
);