Question

我的表单中包含以下输入代码：

<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>

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

我做错了什么???

Answer 1

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

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

没有必要使用Javascript。

Answer 2

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

如果您的有效性很简单并通过字段属性进行控制，则可以使用object.willValidate进行测试并设置自定义有效性消息：

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

Answer 3

如果setCustomValidity为任何非空字符串的值，则会导致input处于invalid状态。所以你的条件是检查一个值，然后将字段设置为invalid。仅当字段中的值实际无效时才setCustomValidity，否则将其设置为空字符串：

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

Answer 4

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

Answer 5

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

我使用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">

Answer 6

针对 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('')}
/>

固定输入字段后，html5 oninvalid不起作用

6 个答案: