【问题标题】：Javascript onchange validation so that :valid and :invalid CSS selectors workJavascript onchange 验证，以便 :valid 和 :invalid CSS 选择器工作
【发布时间】：2015-08-16 21:57:45
【问题描述】：

这似乎是一件简单的事情，但我无法找到任何相关信息。

我怎样才能使用类似以下的东西：

// html: <input type="text" onchange="validate()">
function validate(e) {
    e.preventDefault();

    if(isValid(this.value)) {
        // make valid somehow
    } else {
        // make invalid somehow
    }
}

这样下面的 CSS 就可以正常工作了：

input:valid {
    background: green;
}

input:invalid {
    background: red;
}

【问题讨论】：

标签： javascript html css validation

【解决方案1】：

点击“运行代码sn-p”查看！

您可以创建自定义验证器并在元素上使用setCustomValidity 函数以允许使用这些选择器。

This article 描述了如何使用 HTML5 约束 API 来实现这一点。

示例：

#inputField:valid {
  background-color: green;
}

#inputField:invalid {
  background-color: red;
}

<html>
  <body>
    Type a value (must be 'abc'): <input id="inputField">
    <script type="text/javascript">
      function validateField() {
        if (this.value !== 'abc') {
          this.setCustomValidity('Value must be abc!');
        }
        else {
          this.setCustomValidity('');
        }
      }
      window.onload = function () {
        document.getElementById("inputField").oninput= validateField;
      }
    </script>
  </body>
</html>

【讨论】：

【解决方案2】：

如果你愿意，你可以只使用 css 类（我添加了使用 jquery 来添加和删除类的语法，但也可以在纯 javascript 中完成）..

input.valid {
  background: green;
}

input.invalid {
  background: red;
}

function validate(e) {
    e.preventDefault();   
    if(isValid(this.value)) {
       $(this).removeClass("invalid");
       $(this).addClass("valid");
    } else {
       $(this).removeClass("valid");
       $(this).addClass("invalid");
        // make invalid somehow
    }
}

无 jquery（假设当前没有使用其他类。因为这看起来像您拥有的 html，如果有其他类只需操作字符串以添加和删除相关类）。

function validate(e) {
        e.preventDefault();   
        if(isValid(this.value)) {
           this.className = "valid"
        } else {
           this.className = "invalid"
            // make invalid somehow
        }
    }

【讨论】：

AFAIK、removeClass() 和 addClass() 是 jQuery 方法。 OP 没有提到使用 jQuery。
@Sparky，我也没有添加任何 jquery。
这是一个简单可行的解决方案，谢谢。然而，我仍然很想知道是否有办法使用 :valid 和 :invalid 伪选择器而不是类来做到这一点，或者 JavaScript 是否无法做到这一点。

【解决方案3】：

你在寻找这样的东西吗？

// html: <input type="text" onchange="validate()">
function validate(e) {
    e.preventDefault();
    var target = e.target

    if(isValid(this.value)) {
        target.classList.add("valid")
        target.classList.remove("invalid")
    } else {
        target.classList.remove("valid")
        target.classList.add("invalid")
    }
}

【讨论】：

【解决方案4】：

function validateField(event) {
  event.preventDefault();
  var target = event.currentTarget
  if (target.value != "" || target.value.length > 0) {
    target.classList.remove("invalidFunction");
    target.classList.add("validFunction");
  } else {
    target.classList.add("invalidFunction");
    target.classList.remove("validFunction");
  }
};

.invalidFunction {
  border-color: red;
}

.validFunction{
  border-color: green;
}

Field is mandatory:

<input id="inputFunctionField" onchange="validateField(event)">

【讨论】：