HTML 5 验证错误显示onblur of the field 而不是onsubmit

Question

根据 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">

Answer 1

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

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

HTML 5 验证错误显示onblur of the field 而不是onsubmit

HTML 5 validation error display onblur of the field instead of onsubmit

html

forms

validation

onblur