如何阻止表单输入在第一次单击时注册为无效

How to stop a form input from registering as invalid when first clicked on?

本文关键字：注册 无效 单击 第一次 何阻止 表单 输入      更新时间：2023-09-26

例如，我有一些表单输入，当填写正确时，我的框阴影变为绿色，但当不正确时，它是红色的。目前，只要你点击这个框，它是红色的，不需要任何输入。有没有一种方法，我可以防止它改变为红色或绿色，直到一些东西实际上已经键入与使用js?

除了:focus或:valid，这里还有什么可以用的吗?

CSS

#contactform input:focus:invalid, #contactform textarea:focus:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
} 
#contactform input:required:valid, #contactform textarea:required:valid { 
    box-shadow: 0 0 5px #5cd053;
    border-color: #28921f;
}

编辑:例如:http://jsfiddle.net/27UZs/

如果我理解正确，你希望输入显示为无效，只有当用户填写了一些东西，然后删除它，而不是显示为无效的第一次输入得到焦点，是空的。

你可以用一个小的JavaScript来做这件事。当用户开始输入时，它将删除未填充的类。

<input type="text" class="unfilled" name="name" id="username" placeholder="Rob James" value="" required>

JS 

var no1 = document.getElementById("username");
no1.addEventListener("keyup", function() {
    if(this.value.length > 0) {
        this.className = "";          
    }
}, false);
CSS

#contactform input:not(.unfilled):focus:invalid { 
    box-shadow: 0 0 5px #d45252;
    border-color: #b03535
}
http://jsfiddle.net/27UZs/1/

如果这些字段从一开始就是无效的，那么它将以这种方式运行。您需要通过将验证函数连接到onchange事件来检查javascript中字段的有效性，例如:

btn.onchange = function(){
    //SomeJavaScriptCode
};

，例如，您可以根据

检查结果添加或删除类invalid。
相关文章：