HTML has a set of built-in attributes that enable you, the developer, to easily implement client-side validation.
Let me show you with an example:
Now when users fill this input field, if they don’t provide a valid email address, they’ll get a little alert in the form of a tooltip saying something along the lines of “Please enter a valid email address”.
Let’s imagine that you’re building a site for company MarsX. They want an admin panel that’s accessible through a login page with a form. Only email addresses from MarsX should be allowed.
So you could do something like
<input type="email" pattern=".+@marsx.com" required>
Now all emails will have to match the @marsx.com pattern. No other email will work.
This is nice if, say, John mistyped his company email to firstname.lastname@example.org. He’ll be notified of the error, without having to actually send the form server-side (saves you resources, and saves the user some time, because he’ll get the error notification straight away).
It should never, ever, be considered as data validation, though. In other words, this is not secure.
Anyone can edit your HTML code. So, anyone could simply delete the pattern attribute, and try to use another email.
Of course, since you’ll be doing validation on the back-end, server-side, you’ll make sure that only @marsx.com email addresses can in fact be used, and other useful and secure validation.
Hope this answers your question!