Question

如果字段为空，我试图让这个表单在提交后更改标签颜色，然后在填写字段时返回到正常状态。

它的行为类似于： Onsubmit validate change background requried fields?

除了我无法弄清楚如何将输入链接到标签。我正在使用上面链接中的jsFiddle：

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不太好。请帮忙！

Answer 1

以下是您的Working sample </>

Answer 2

你应该用dom值环顾Knockoutjs style binding 。

Answer 3

您可以添加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;
      }
    }
}

请参阅：updated Fiddle

Answer 4

尝试

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

演示：Fiddle

Answer 5

您可以使用 jquery验证插件 ...它支持所有类型的验证以及更改标签颜色和＆amp;可以显示合适的错误消息

Answer 6

这里有一个非常简单，聪明但有效的方法，通过使用惊人的敲除绑定来完成这个工作示例：JsFiddle Link

var viewModel = {
validation: ko.observable(function(){})
};

onSubmit验证更改标签样式

6 个答案: