onSubmit验证更改标签样式

onSubmit validation changing label style

本文关键字：标签样式 验证 onSubmit      更新时间：2023-09-26

我试图让这个表单改变标签颜色提交后，如果字段是空的，然后返回正常时，字段填写。

它的行为类似于:Onsubmit验证更改后台必填字段?

除了我不知道如何将输入链接到标签。我正在使用上面链接中的jsFiddle:

http://jsfiddle.net/interdream/cpG2r/7/

window.onload = function() {
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 {
      fields[i].style.backgroundColor = "#fff";      
    }
  }
  if(!sendForm) {
    return false;
  }
}
}

我的JavaScript不是很好。请帮助!

这是你的工作样品</>

你应该看看Knockoutjs风格的dom值绑定。

您可以添加label标签，如:

<form action="" id="myForm">
    <label for="field1">Required field:</label> <input type="text" name="field1" class="required" /><br />
    <label for="field2">Required field 2:</label> <input type="text" name="field2" class="required" />
    <input type="submit" value="Go" />
</form>

在js部分

window.onload = function() {
    document.getElementById("myForm").onsubmit = function() {
      var fields = this.getElementsByClassName("required"),
          sendForm = true;
      for(var i = 0; i < fields.length; i++) {
          var lbl = document.getElementsByTagName("label")[i]; //get label
        if(!fields[i].value) {
            lbl.style.color = "red";
            console.log(lbl );
          fields[i].style.backgroundColor = "#ff0000";
          sendForm = false;
        }
        else {
            lbl.style.color = "black";
          fields[i].style.backgroundColor = "#fff";      
        }
      }
      if(!sendForm) {
        return false;
      }
    }
}

参见:更新后的Fiddle

Try

<form action="" id="myForm">
    <label>Required field: </label><input type="text" class="required" /><br />
    <label>Required field 2: </label><input type="text" class="required" />
    <input type="submit" value="Go" />
</form>

和

window.onload = function() {
    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";
                var prev = fields[i].previousSibling;
                while(!/label/i.test(prev.tagName)){
                    prev = prev.previousSibling;
                }
                prev.style.backgroundColor = "#ff0000";
                sendForm = false;
            }
            else {
                fields[i].style.backgroundColor = "#fff";      
            }
        }
        if(!sendForm) {
            return false;
        }
    }
}

演示:小提琴

你可以使用jquery验证插件…它支持所有类型的验证以及更改标签颜色。可以显示合适的错误信息

这里有一个非常简单，聪明但有效的方法，通过使用惊人的敲除绑定来做到这一点，这里是工作示例:

var viewModel = {
validation: ko.observable(function(){})
};
相关文章：