Javascript 使用“突出显示无效字段”&引用；验证后

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

我更希望文本框背景变成红色（或文本框周围出现红色边框），因为我认为这样看起来更好

---

谁能给我一段代码来实现这一点。

您需要一个函数来验证表单，请参阅

下面是我举的一个例子：

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
}

您需要将其附加到表单的

onsubmit

事件，以便它能够防止提交（通过返回false），例如：

var forms=document.getElementsByTagName（“表单”）
对于（var i=0，len=forms.length；i如果将文本框包装在容器元素中，例如
，则可以使用css伪元素显示
！
，如下所示：


函数验证（）{
var txts=document.querySelectorAll（“输入[type='text']”）；
对于（var i=0；i到目前为止，您是否对您尝试的内容有意见？您想要哪一个，红色“！”、红色背景或红色边框？在决定之后，显示您尝试的内容以及失败的原因。您还需要决定验证是否意味着HTML验证（具有
必需
等属性），或CSS验证，或两者，因为这会影响实现。我想要一个红色“！”红色边框，我需要javascript验证。@VishalChugh希望更新的答案有帮助…@freefaller lol。我不明白为什么每个人都这么讨厌它们。那么你还没有读过我链接的网站。你可以选择是否使用它们，绝对没有什么能阻止你…我的答案是不使用它们，我已经给出了为什么使用它们的原因d ans@TastySpaceApple。只需告诉我在未填充的框末尾添加“！”的方法。
input.invalid{ background-color:#dd1111; }

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