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

html5 oninvalid doesn't work after fixed the input field

提问by Jean

I have this input code in my form:

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

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

I change the oninvalid message with this javascritp code:

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

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

 }
</script>

Here is the problem, if I clicked on submit and the field is empty, the field shome the error so I need to fill the field, but after fill the field, I still getting the warning even the fill is not empty.

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

What I'm doing wrong???

我做错了什么？？？

采纳答案by Erics

You can set a custom validity message with setCustomValidity, however any non-blank string will cause the field to act as if it had an invalid value. You need to setCustomValidity('')to clear the invalidated state of the field.

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

If your validity is simple and controlled via field attributes, you can use object.willValidateto do the test and set the custom validity message:

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

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

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

回答by venkat reddy padala

If you set a value with setCustomValidity()then the field is invalid. That is setting a non-zero length string causes the browser to consider the field invalid. In order to take effects of your new input you have to clear the custom validity. Simply you can use the following:

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

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

There is no need to use Javascript for this.

没有必要为此使用 Javascript。

回答by robertc

If you setCustomValidityto any value that is not the empty string then that will cause the inputto be in the invalidstate. So your condition is checking for a value, then setting the field to be invalideither way. Only setCustomValiditywhen the value in the field is actually invalid, otherwise set it to an empty string:

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

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

回答by Ojas Deshpande

For me only oninvalid="this.setCustomValidity(this.willValidate ? '' :'You must choose the account type from the list')"works. There are lots of issues while using it with IE.

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

回答by jsherk

The issue is that the custom validity error message needs to be reset to blank/empty again, or the field will never validate (even with correct data).

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

I use oninvalidto set the custom validity error message, and then use onchangeto set the message back to default (blank/empty), and then when the form is checked again it will correctly submit if data was corrected, or it will set the custom error message again if there is problem.

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

So something like this:

所以像这样：

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