html5 oninvalid在修复输入字段后不工作

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

我用下面的代码更改了一个无效的消息：

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

 }
</script>

问题是，如果我单击提交，字段为空，字段显示错误，因此我需要填充字段，但填充字段后，即使填充不为空，我仍会收到警告。

我做错了什么？？？

Answer 1

如果将CustomValidity设置为非空字符串的任何值，则这将导致输入处于无效状态。因此，您的条件是检查一个值，然后将字段设置为无效。只有当字段中的值实际无效时，才setCustomValidity，否则将其设置为空字符串：

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

Answer 2

您可以使用setCustomValidity设置自定义有效性消息，但是任何非空字符串都会导致该字段的行为如同其具有无效值一样。您需要setCustomValidity（“”）来清除字段的无效状态。

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

="this.set自定义有效性（this.will验证？"：'你的自定义消息'）"

Answer 3

如果使用setCustomValidity（）设置值，则该字段无效。即设置一个非零长度字符串使浏览器考虑字段无效。为了使新输入生效，您必须清除自定义有效性。您可以简单地使用以下各项：

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

没有必要为此使用Javascript。