HTML 5 验证错误显示字段的 onblur 而不是 onsubmit答案

【问题标题】：HTML 5 validation error display onblur of the field instead of onsubmitHTML 5 验证错误显示字段的 onblur 而不是 onsubmit
【发布时间】：2021-10-25 16:39:04
【问题描述】：

根据 HTML5 的默认行为，表单验证错误仅在我们单击提交按钮时才会显示，如下图所示。

我们有什么方法可以在字段的模糊上显示它而不是在提交上？我们可以改变它的默认行为吗？

这是 HTML，我用来显示错误

<input type="text" name="mobile" class="form-control input-custom" placeholder="eg. 9823523461" maxlength="10" pattern="[6789][0-9]{9}" title="Please enter exactly 10 digits" required id="id_mobile">

【问题讨论】：

标签： html forms validation onblur

【解决方案1】：

只需将onblur="this.reportValidity()" 添加到您的表单元素。

<input type="text" onblur="this.reportValidity()" name="mobile" ... required id="id_mobile" >

【讨论】：