Javascript html5 oninvalid不'；在固定输入字段后无法工作

我的表格中有以下输入代码：

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

功能检查（输入）{
如果（input.value==“”）{
setCustomValidity（'Debe completar este campo'）；
}否则{
setCustomValidity（'Debe corregir este campo'）；
}
}

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

---

我做错了什么？

如果

将CustomValidity

设置为非空字符串的任何值，那么这将导致

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

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


功能检查（输入）{
如果（input.value==“”）{
setCustomValidity（'Debe completar este campo'）；
}否则{
input.setCustomValidity（“”）；
}
}
您可以使用
setCustomValidity
设置自定义有效性消息，但是，任何非空字符串都会导致该字段的行为如同其具有无效值一样。您需要
setCustomValidity（“”）
来清除字段的无效状态

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

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

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



无需使用Javascript进行此操作。
仅限我使用
oninvalid=“this.setCustomValidation（this.willValidate？“”：“您必须从列表中选择帐户类型”）”
有效。将其与IE一起使用时存在许多问题。
问题在于需要将自定义有效性错误消息重新设置为空白/空，否则该字段将永远无法验证（即使数据正确）

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

用于脚本用户

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

const inputRef=useRef（null）；
函数setCustomValidity（customMsg？：字符串）{
inputRef.current？.setCustomValidity(
customMsg的类型==“字符串”？“”：t.errors.requiredField，
);
}
setCustomValidity（）}
onInput={（）=>setCustomValidity（“”）}
/>
“这不需要使用Javascript”-这是Javascript，尽管在on。。。属性。有一件事我注意到了，我不知道为什么。。。“为什么？”test@test“通过吗？这是无效的email@carinlynchin根据
test@test
是有效的电子邮件。正则表达式是
/^[a-zA-Z0-9.！$%&'*+\/=？^{124}-]+-[a-zA-Z0-9]（？：[a-zA-Z0-9-]{0,61}[a-zA-Z0-9]）？（？：\[a-zA-Z0-9]（？：[a-zA-Z0-9-]{0,61}[a-zA-Z0-9]）*$/
。Last
*
表示允许在末尾添加任意数量的
。字符串
s，包括0。willValidate是一个属性，表示是否可以验证输入，而不是输入是否有效。我尝试了这个答案，但它不起作用
willValidate
只告诉您数据是否“可以”验证，而不是它是否实际有效。示例：使用
并在字段中输入一个字母（无效），willValidate仍然为TRUE。我也尝试了这个答案，但它也不起作用。