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

user_3835758 0
Viewed 153

As per HTML5's default behaviour, form validation error displays only when we click the submit button as shown in below screenshot.
enter image description here

Is there any way we can show it onblur of the field instead of onsubmit? Can we change its default behaviour?

This is the HTML, I am using to display the error

<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">
onblur validation forms html
1 Answers

Simpliy add onblur="this.reportValidity()" to your form element.

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