How HTML's built-in client-side verification helps us save time?

After I read the intro to Form Validation in HTML, I couldn’t understand these lines :

Shared among the different browsers are the benefits of using HTML5’s built-in client-side validation. It saves us time from having to send information to the server and wait for the server to send back confirmation or rejection of the data. This can also help us protect our server from malicious code or data from a malicious user. It also allows us to quickly give feedback to users for specific fields rather than having them fill in a form again if the data they input into the form was rejected.

If anybody explains me these lines, especially the first two lines, it will be very helpful for me. :slightly_smiling_face:

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:

<input type="email">

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 john@marx.com. 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).


Of course, please note that this is only used for convenience. This simply enhances UX (User Experience). This can usually be achieved through HTML’s built-in validation, or JavaScript.
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!

3 Likes

Thanks, @ghostlovescore, for your easy-to-understand explanation. :slightly_smiling_face:

But I have some doubt regarding these lines :

What is HTML’s built-in validation ? Why is client-side validation not secure ?

And also in these lines :

How will anyone be able to change the code ? By right-clicking on the webpage and clicking on ‘Inspect’ ? But you said we’ll be on the back-end server, ensuring the pattern of the above mentioned email address. So I’m getting a bit puzzled about it.

Too many questions though, but clarifying these doubts will help me a bit. :slightly_smiling_face:

1 Like

It’s what I showed in my previous message, things like

This will notify the user that he has to fill in the input field, and that the email must be of type user@marsx.com

Which leads us to

That’s right, HTML can be edited by anyone. So it’s can’t be considered secure validation. Take the input above. Anyone could just remove the attributes pattern and required, for example.

If you required that only email addresses from company @marsx.com were to be allowed, you’d have to check that on the back-end, where code cannot be tampered with.

Another example would be if you wanted a user to select a value from a list. I could just edit the code to enter my own value (unrelated to your content), and in some cases, if code is poor, and proper validation not applied, this could even lead to SQL injections, for example. So you could check the user provided value against an array of whitelisted accepted options. If the input doesn’t match one of your pre-defined values, the form wouldn’t go through (and you could send back an error message).

Or say you had a login form, but didn’t apply proper validation on the back-end (such as flawed logic, as it has happened in the past with famous hacker Adrian Lamo), you could potentially let the user log-in (in worst case scenario, with admin priviledges…), which could do a lot of damage.

Point being,

  • Front-end validation is for convenience only, to make it easier for users to navigate
  • Proper back-end validation is absolutely crucial – never take it lightly
  • Never, ever, ever, ever […] trust user input – it could lead to nasty things
1 Like