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>