Question

我想在文本框旁边显示一个未填写的红色感叹号。

我更希望文本框背景变红（或文本框周围出现红色边框），因为我觉得它看起来更好。

任何人都可以给我一段代码来实现这一目标。

Answer 1

您需要一个功能来验证表单，请参阅http://www.w3schools.com/js/js_form_validation.asp

这是我做的一个例子：

function validateForm(){
    var inputs = this.getElementsByTagName("input") //get all the inputs
    var valid = true;
    for(var i=0, len=inputs.length; i<len; i++){ //for each inputs
        if(inputs[i].type == "submit" || inputs[i].type == "button") //ignore buttons
            continue;
        if(inputs[i].value == ""){ //if input is empty
           inputs[i].className = "invalid"; // set class to "invalid"
            valid = false
        }else //if inputs is not empty
            inputs[i].className = ""; //remove class
    }
    return valid
}

它将一个类“无效”附加到所有空输入。这更好semantically然后只更改背景颜色。然后在css中你可以：

input.invalid{ background-color:#dd1111; }

您需要将其附加到表单的onsubmit事件，以便它能够阻止submition（通过返回false），例如：

var forms = document.getElementsByTagName("form")
for(var i=0, len=forms.length; i<len; i++){
    forms[i].onsubmit = validateForm
}

请参阅小提琴：http://jsfiddle.net/SpacePineapple/CbxcM/

Answer 2

如果将文本框包装在<div>等容器元素中，则可以使用css伪元素::after来显示!，如下所示：

function validate(){
 var txts  = document.querySelectorAll("input[type='text']");
 for(var i=0;i<txts.length;i++){
  if(!txts[i].value)
   txts[i].parentNode.classList.add('invalid');
  else
    txts[i].parentNode.classList.remove('invalid');
 }
}

.invalid input{
  border-color:red;
}
.invalid::after{
  content:"!";
  font-weight:bolder;
  color:red;
}

<div><input type='text' /></div>
<div><input type='text' /></div>
<div><input type='text' /></div>
<input type='button' value="Validate" onclick="validate()" />

参考：

使用“！”突出显示无效字段验证后

2 个答案: