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“myForm”附加表单的id事件的监听器。然后它使用一个“必需”类获取该表单中的所有元素（请注意，在旧版本的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();
   }
  });
);

Onsubmit验证更改背景必填字段？

3 个答案: