Question

如果您想在chrome中设置setCustomValidity函数的有效性，则不会设置消息。

<input type="text" id="username" required placeholder="Enter Name"
oninput="setCustomValidity('error')"  />

正如您所看到的，如果您在Firefox和Chrome上运行此jsfiddle，您可以在Chrome上看到该字段没有验证消息。

为了看到发生的事情，请去firefox打开jsfiddle并输入一些内容。输入内容后点击外部并观察是否添加了红色边框并显示文本“错误”。

Chrome有解决方法吗？

修改我在铬上记录了bug。请随时关注此主题。

Answer 1

对我来说这看起来像个错误。我尝试在the example given in the spec中运行JS fiddle here。同样，它适用于Firefox，但不适用于Chrome。

function check(input) {
  
  if (input.value == "good" ||
    input.value == "fine" ||
    input.value == "tired") {
    input.setCustomValidity('"' + input.value + '" is not a feeling.');
  } else {
    // input is fine -- reset the error message
    input.setCustomValidity('');
  }
}

<label>Feeling: <input name=f type="text" oninput="check(this)"></label>

解决方法可能是在输入上使用pattern attribute并提供正则表达式来验证输入。

我将使用规范中给出的示例。您可以在pattern属性中设置正则表达式模式，并在title属性中设置错误消息：

<label>Feeling: <input name=f type="text" pattern="((?!(?:good|fine|tired)).+)" title="Input is not a feeling."></label>

使用它，您可以使用伪选择器:invalid将红色边框（或其他任何内容）应用于输入：

input:invalid {
  border-color: red;
}

input:invalid {
  border-color: red;
}

<label>
  Feeling:
  <input name=f type="text" pattern="((?!(?:good|fine|tired)).+)" title="Input is not a feeling." value="good">
</label>

小提琴：https://jsfiddle.net/065thz0w/21/

注意：这种方法的明显缺点是您不再能够使用Javascript进行验证 - 而且您将无法验证字段组合的值。

Javascript setCustomValidity在Chrome版本65上不起作用

1 个答案: