19

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

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

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

我做错了什么？？？

4

6 回答 6

35

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

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

无需为此使用 Javascript。

于 2015-05-09T04:52:05.340 回答
9

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

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

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

于 2013-02-12T13:59:30.177 回答
2

如果您setCustomValidity使用任何不是空字符串的值，那么这将导致input处于invalid状态。因此，您的条件是检查一个值，然后将该字段设置为invalid任一方式。仅setCustomValidity当字段中的值实际无效时，否则将其设置为空字符串：

<script>
 function check(input) {
   if (input.value == "") {
     input.setCustomValidity('Debe completar este campo.');
   } else  {
     input.setCustomValidity('');
   }
 }
</script>
于 2012-12-27T00:11:52.007 回答
1

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

于 2016-11-29T20:31:57.720 回答
1

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

我用于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">
于 2020-01-16T06:55:14.057 回答
0

对于 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('')}
/>
于 2021-02-04T20:40:22.217 回答