修复输入字段后，html5 oninvalid 不起作用答案

【问题标题】：html5 oninvalid doesn't work after fixed the input field修复输入字段后，html5 oninvalid 不起作用
【发布时间】：2012-12-12 04:31:52
【问题描述】：

我的表单中有这个输入代码：

<input maxlength="255" id="information_name" name="information[name]" oninvalid="check(this)" placeholder="Nombre Completo" required="required" size="30" style="width:528px;height:25px;" tabindex="3" type="text">

我用这个 javascritp 代码更改了 oninvalid 消息：

<script>
 function check(input) {
   if (input.value == "") {
     input.setCustomValidity('Debe completar este campo.');
   } else  {
     input.setCustomValidity('Debe corregir este campo.');
   }

 }
</script>

这就是问题所在，如果我点击提交并且该字段为空，则该字段会显示错误，因此我需要填写该字段，但是在填写该字段后，即使该字段不为空，我仍然会收到警告。

我做错了什么？？？

【问题讨论】：

标签： javascript html

【解决方案1】：

对于 React Hooks Typescript 用户

const inputRef = useRef<HTMLInputElement>(null);

function setCustomValidity(customMsg?: string) {
  inputRef.current?.setCustomValidity(
    typeof customMsg === 'string' ? '' : t.errors.requiredField,
  );
}

<input
  ref={inputRef}
  onInvalid={() => setCustomValidity()}
  onInput={() => setCustomValidity('')}
/>

【讨论】：

【解决方案2】：

问题是自定义有效性错误消息需要再次重置为空白/空，否则该字段将永远不会验证（即使数据正确）。

我使用oninvalid 设置自定义有效性错误消息，然后使用onchange 将消息设置回默认值（空白/空），然后当再次检查表单时，如果数据正确，它将正确提交已更正，否则如果有问题，它将再次设置自定义错误消息。

所以是这样的：

<input type="number" oninvalid="this.setCustomValidity('You need to enter an INTEGER in this field')" onchange="this.setCustomValidity('')" name="int-only" value="0" min="0" step="1">

【讨论】：

【解决方案3】：

如果您使用setCustomValidity() 设置值，则该字段无效。即设置非零长度字符串会导致浏览器认为该字段无效。为了使您的新输入生效，您必须清除自定义有效性。只需您可以使用以下内容：

<input required maxlength="255" id="information_name" minlength=1 name="information[name]" oninvalid="setCustomValidity('Should not be left empty.')" 
   oninput="setCustomValidity('')" />

没有必要为此使用Javascript。

【讨论】：

"没有必要为此使用 Javascript" - 这是 Javascript，虽然内联在 on... 属性中。
Curious turn of phrase you used there
我注意到一件事，但我不知道为什么......为什么“test@test”通过了？这不是有效的电子邮件
@carinlynchin 根据HTML5 standard test@test 是有效的电子邮件。正则表达式是/^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/。最后一个* 表示末尾允许任意个.strings，包括0。

【解决方案4】：

只有oninvalid="this.setCustomValidity(this.willValidate ? '' :'You must choose the account type from the list')" 对我有用。在 IE 中使用时有很多问题。

【讨论】：

我也试过这个答案，它也不起作用。

【解决方案5】：

您可以使用setCustomValidity 设置自定义有效性消息，但是任何非空白字符串都会导致该字段的行为就像它具有无效值一样。您需要setCustomValidity('')清除该字段的无效状态。

如果你的有效性比较简单，通过字段属性控制，可以使用object.willValidate进行测试，设置自定义有效性信息：

oninvalid="this.setCustomValidity(this.willValidate?'':'your custom message')"

【讨论】：

willValidate 是一个属性，表示输入是否可以被验证，而不是它是否有效。
我试过这个答案，但它不起作用。 willValidate 只告诉您数据是否“可以”验证，而不是它是否实际有效。示例：使用<input type='number'> 并在字段中输入一个字母（无效），willValidate 仍然为 TRUE。

【解决方案6】：

如果您将setCustomValidity 设置为不是空字符串的任何值，那么这将导致input 处于invalid 状态。所以你的条件是检查一个值，然后将字段设置为invalid。只有setCustomValidity字段中的值实际无效时，否则设置为空字符串：

<script>
 function check(input) {
   if (input.value == "") {
     input.setCustomValidity('Debe completar este campo.');
   } else  {
     input.setCustomValidity('');
   }
 }
</script>

【讨论】：