表单验证的提示语问题

Question

使用form表单，input设置成如下

<input oninvalid="setCustomValidity('请输入价格')" type="number" class="price" required />

第一次如果不填会有提示，没问题，但是填完之后再提交还是提示请输入。为什么呢？
所有的input都是这样，第一次提示后填完再提交还是有提示

Answer 1

你的问题有挺多解决方案的，就是如果符合预期结果，则清空你的setCustomValidity.

比如下面这样子写：

<input oninvalid="this.setCustomValidity(this.value !== ''?'':'请输入价格')" type="number" class="price" required />

但是上面这样子写，你会发现一个问题，需要点击两次 submit 才能提交表单。

可以这么理解吧，当你把一个表单 oninvalid 之后，浏览器认为这个已经决议了，（抱歉我这里使用了决议，我不知道使用什么词语）。之后就会默认的认为这个表单存在问题，不让提交，因此在下次提交的时候，需要将这个表单的setCustomValidity清空一下。上面需要点击两次submit的原因是只有required 是submit时候才触发的，因此点击一次submit只是清空了setCustomValidity，需要再点击一次。

最好的写法是下面这种：每次输入都清空一次setCustomValidity('请输入价格') 不满足才出发

<input oninvalid="setCustomValidity('请输入价格')" oninput="setCustomValidity('')"type="number" class="price" required />

Answer 2

oninput="setCustomValidity('')"需要清除这个自定义错误