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

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

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

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

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