HTML5's custom error messages on required input fields

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

HTML5's custom error messages on required input fields

Comments

More from this blog

Email validity checker using Google's JSON API for DNS over HTTPS (DoH) in Google Sheets

Getting picoclaw to work on Windows

The core use-case of TypeScript

Hashnode's GraphQL API for RSS feeds

make makemigrations work again

Command Palette

Comments

More from this blog