2

关于 HTML5 表单验证，我有两个主要问题。

1-我使用此代码更改输入的验证消息

$$('INPUT').each(function(input) 
{    
  input.oninvalid = function(event) 
  {
     event.target.setCustomValidity('');
     if (!event.target.validity.valid) event.target.setCustomValidity('Please Fill');
  };
}

这种方法有很大的问题。如果输入无效，则提交表单时，会附加一条错误消息。所以它不会验证新的输入。即使在更正并再次提交后，它也不会让表单被提交，因为消息仍然是附加的。所以 event.target.setCustomValidity('') 将删除消息并且表单需要再次提交。二更正后提交。

我找不到纠正这种行为的方法。

2-如何完全隐藏或禁用这些工具提示但仍使用表单验证。有时候想用css无效和有效的伪类，但是还是显示这些提示。

我在提交按钮上找到了 formnovalidate，然后我可以在提交之前手动检查每个输入的有效性。有更好的主意吗？

4

2 回答 2

0

（有点晚了）但解决方案可能就在那里！

会发生什么：由于您自定义了错误消息event.target.setCustomValidity("...")，因此中的属性element.validity.customError是true; 总是返回的reportValidityfalse并且提交无效

我做了什么？当用户更改输入 ( event.on Change) - 我设置了默认错误消息event.target.setCustomValidity('');，这将告诉浏览器继续工作而不会出现自定义错误

于 2022-01-17T19:58:54.463 回答
0

就问题1而言：

我有一个输入

<input name="VoucherCode"  id="VoucherCode"  type="text" pattern="(1[0-9]{9})|(2[0-9]{9})" value="">

并改进了默认消息

$("#VoucherCode").on("invalid", function (event) {
    event.target.setCustomValidity('The format of Voucher Code is not correct.')
});

但这与您遇到的问题相同：如果用户第一次尝试错误，则正确的响应仍会显示无效模式消息。

我根据@Pointy 的建议解决了这个问题：

$("#VoucherCode").on("invalid", function (event) {
    event.target.setCustomValidity('The format of Voucher Code is not correct.')
}).bind('blur', function (event) {
    event.target.setCustomValidity('');                
});
于 2016-09-26T11:47:33.237 回答