Подтвердить изменение фона обязательные поля?

Question

Кто-нибудь знает хороший учебник / метод использования Javascript для изменения цвета всех пустых полей с помощью 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;
    }
}

Это присоединяет слушателя к событию onsubmit формы с id "myForm". Затем он получает все элементы в этой форме с классом «required» (обратите внимание, что getElementsByClassName не поддерживается в более старых версиях IE, так что вы можете поискать альтернативы там), просматривает эту коллекцию, проверяет значение каждый, и меняет цвет фона, если он находит пустые. Если есть какие-либо пустые, это предотвращает отправку формы.

Вот рабочий пример .

Answer 2

Я быстро стал поклонником 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();
   }
  });
);

Answer 3

Возможно что-то вроде этого:

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