Form Validation is something we all have to do on daily basis on the frontend because we want to improve user experience.
I will explain some sim...
For further actions, you may consider blocking this person and/or reporting abuse
None of these things actually protect the back end.
I do not entirely agree, because if the data does not pass the client-side validation, it won't even get to the server-side(backend) validation. So technically it does.
User can bypass client-side validation.
True, but still it does not take the away the importance and essence of client-side validation. The point of the article is to share tips of how to validate on the client side with html, it doesn't disregard the server-side validation.
The client side validation enhance the user experience of the end user, too. About security, the backend should be the final layer and have its own validation.
So both of them are important🎉
Very true @d__raptis
I see this as useful!
I completely agree final validation shouldn't be done on the client because it can be bypassed. But this kind of validation can reduce the number of "not valid" requests to the server. It is good to have one more layer of security in your applications.
Thank you @denislapi for this.
Interesting ways of maximizing the capabilities of HTML5. Thank you for this article.
Front-end validation enhances the user experience. And a great user experience means a higher usage.
Front-end validation does not however secure the application. For security, validation must be done on the server-side as well.
True, the essence here was not to get rid of the server-side validation but to show you ways that HTML can help validate on the client-side.
Hello Nedy, nice article! I'm sure people that are just getting into html5 features will find it extremely useful!
However, i'd like to point out a misconception on your very first sentence "Form Validation is something we all have to do on daily basis on the frontend because we want to ensure the validity of the data sent to the backend." as i think it may mislead newcomers.
As others have said, you absolutely cannot enforce validation on something the user owns ( browser in this case ), because there are plenty of ways of getting around: disable javascript, edit inputs with devtools, make raw post requests ( if these methods sound too technical for a normal user, think about a simple javascript error on a legacy browser you didn't even need to support ).
Security and validity should always be enforced by something the user has no access to: the server.
So why even bother validating user input on the frontend?
The answer is user experience.
If you run on the client the same checks that the server runs, in 99% of the cases you will catch errors before the request is sent, or better, before the user even finishes typing. This way, you will reach the number one goal for the user: to not waste time!
Thank you @matteorigon , reading back now, I see the perspective of which this would sound to a newcomer. The essence of this is to improve user experience and also reduce the amount of calls made to server in order to validate the data sent.
Like I also replied in other comments, I did not write this to take away the essence and important of server-side security and validation.
That said, I will update this to clearly reflect my thoughts.
Best way is validating from back end
You definitely have to validate in the backend for data consistency and security, because frontend validation can be disabled, but having validation in the frontend can significantly improve the user experience.
Thank you @mnrode for clarifying that
You actually have to validate both ways. That way you catch most of it on the frontend and leave the rare /edge cases to be handled by the backend.
I think the type field is very important to allow the browser to also enter cached autocompletion data as well as allow accessibility.
However I would advise against using custom regular expressions und pattern field.
E.g. the password should just be very long, it doesn’t need a lot of special characters. This is just frustrating for the user. Same goes for phone numbers, I’ve seen so many form fields where I couldn’t enter a standard compliant phone number that just drives me crazy. Especially when the form just says it’s invalid but not why.
Thank you @stealthmusic . The regular expressions in the article are just for the purpose of explaining what the pattern attribute does. Using a title attribute can help tell the user what to input in cases where the platform wants a certain type of data.
Awesome article! Quite useful
Thank you Orie
Nice one. Really helpful
Thank you @johngorithm I am glad you liked it
This is a first validation - on client. You need make a second validation on server too.
Correct @vlasales
Usefullll
Thank you Mohammad