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然后它使用“必需”类获取该表单中的所有元素（请注意，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();
   }
  });
);