Anjanesh Lekshminarayanan
Anjanesh

Anjanesh

HTML5's custom error messages on required input fields

Anjanesh Lekshminarayanan's photo
Anjanesh Lekshminarayanan
·Mar 20, 2020·

min read

Subscribe to my newsletter and never miss my upcoming articles

A lot of client-side validation can be done natively on browsers. The main attribute is required which specifies which input is mandatory for which the browser will highlight the input field and show a pre-defined error message which can be overridden using setCustomValidity on the oninvalid event.

<form action="" method="post">
    <input type="text" id="firstname" name="firstname" required oninvalid="this.setCustomValidity('Woah ! You\'ve got to enter the first name !');"/>
    <button id="btn-Submit">Submit</button>
</form>

Screenshot 2020-03-20 at 10.28.58 AM.png

 
Share this