# 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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity) on the `oninvalid` event.

```html
<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](https://cdn.hashnode.com/res/hashnode/image/upload/v1584680363712/R0etIJb-j.png align="center")