我希望能够精确控制何时使用vanilla js通过CSS向用户显示有效性状态。我选择分配自定义类而不是样式化input：invalid和input：valid，但是我提出的解决方案不起作用。我对表单不熟悉，可能我的整个解决方案逻辑都有缺陷，但除了分配类之外，其他一切似乎都在工作（设置和报告CustomValidity）。
我做了这个CodePen来演示我的问题：https://codepen.io/kmekmekme/pen/qBQNggb
const firstName = document.querySelector("#first-name");
firstName.addEventListener("input", (e) => {
firstName.setCustomValidity("");
var val = firstName.validity.valid;
firstName.classList.remove("valid");
firstName.classList.remove("invalid");
if (val == false) {
if (firstName.validity.tooShort) {
firstName.setCustomValidity("First name must be 2 letters or longer.");
setTimeout(() => {
firstName.reportValidity();
firstName.classList.add("invalid"); }, 900); }
else if (firstName.validity.patternMismatch) {
firstName.setCustomValidity("First name can only contain letters");
setTimeout(() => {
firstName.reportValidity();
firstName.classList.add("invalid"); }, 900); } }
else if (val==true) {
firstName.classList.add("valid");
firstName.setCustomValidity(""); } })我很抱歉，如果这个问题可能是具体的或没有帮助其他用户，但我不能弄清楚我自己与谷歌。
在这个例子中，我尝试在每次用户输入时删除两个类，但我也尝试在每次分配一个类时删除另一个类（例如。“）; document. writeln（“document. writeln”）; invalid（）;另一个解决方案似乎比第一个更好，但它仍然是错误的。我试图实现对错误输入的实时响应，因此使用“更改”事件不会产生我想要的结果。
编辑：当我只是删除我设置的超时时，函数似乎工作得很好。我需要一种方法，使我的报告仍然工作的真实的，但没有输入字段变成红色，只要你开始打字（因为你最初需要只有一个字母）。有没有办法做到这一点？
1条答案
按热度按时间nc1teljy1#
代码的问题是在更新有效性状态之前触发了输入事件。因此，当您检查firstName.validity.valid时，它仍然具有以前的值。这就是为什么课堂作业没有像预期的那样工作。要解决这个问题，可以使用change事件而不是input来更新有效性状态并分配类。在有效性状态已被更新之后触发改变事件。下面是使用change事件的代码的更新版本：
在这段代码中，使用了change事件而不是input。调用checkValidity（）方法来更新有效性状态，然后根据有效性状态分配类。我还删除了不必要的检查，如瓦尔== false和val == true，因为checkValidity（）已经返回了一个布尔值。通过这些更改，应该根据输入字段的有效性状态正确地分配类。