固定输入字段后,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">

我用这个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')"