1

如果该字段为空，我正在尝试让此表单在提交后更改标签颜色，然后在填写该字段时恢复正常。

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

除了我不知道如何将输入链接到标签。我正在使用上面链接中的 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 不太好。请帮忙！

4

6 回答 6

2

这是您的工作样本</>

于 2013-05-22T06:00:51.393 回答
0

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

请参阅：更新的小提琴

于 2013-05-22T05:34:34.790 回答
0

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

于 2013-05-22T05:39:57.527 回答
0

您应该查看带有 dom 值的Knockoutjs 样式绑定。

于 2013-05-22T05:23:22.547 回答
0

尝试

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

演示：小提琴

于 2013-05-22T05:37:32.617 回答
0

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

var viewModel = {
validation: ko.observable(function(){})
};
于 2013-05-22T05:48:58.643 回答