What is client-side validation

JavaScript: client-side vs. server-side validation


Which is better for client-side or server-side validation?

In our situation we use

  • jQuery and MVC.
  • JSON data to be transferred between our view and the controller.

A lot of my validation consists of validating data as users enter it. For example, I use the event to prevent letters in a text field, to set a maximum number of characters, and to have a number in a range.

I think the better question would be: are there any advantages to server-side validation over client-side?


Ingenious answers everyone. The website we have is password protected and for a small user base (<50). If they're not running JavaScript, we're sending ninjas. But if we were to design a site for everyone, I would agree to validation on both sides.



Reply:


As others have said, you should do both. Here's why:

Client side

You want to check the input on the client side first because you have better feedback for the average user can give. For example, if you enter an invalid email address and move to the next field, you can immediately see an error message. In this way the user can correct any field, before he submits the form.

If you are only validating on the server, you will have to submit the form, get an error message and try to fix the problem.

(This pain can be alleviated by having the server re-render the form using the user's original input, but client-side validation is still faster.)

Server side

You want to validate on the server side as you are Protect from malicious users that can easily bypass your JavaScript and send dangerous input to the server.

It is very dangerous to trust your user interface. Not only can you abuse your user interface, but you can also not use your user interface or even a browser at all . What if the user manually edits the URL, runs their own Javascript, or uses another tool to optimize their HTTP requests? For example, what if they are sending custom HTTP requests from or from a script?

( This is not theoretical. For example, I've worked on a travel search engine where the user's search was re-sent to many partner airlines, bus companies, etc., sending requests as if the user had filled out each company's search form, then collecting and sorting all the results. These companies' Form JS never ran, and it was vital for us that they provide error messages in the returned HTML. Of course an API would have been nice, but we had to do that. )

Not taking this into account is not only naive for security reasons, it is also not standardized: a client should be allowed to send HTTP by any means desired, and you should react correctly. That includes validation.

Server-side validation is also important for the Compatibility. JavaScript is not enabled for all users, even if they use a browser.

Addendum - December 2016

There are some checks which cannot even be done properly in server-side application code and cannot even be done in client-side code as they depend on the current state of the database. For example, “Nobody registered this username” or “The blog post you are commenting on still exists” or “No existing reservation overlaps the details you requested” or “You have enough balance on your account to cover this purchase . " Only the database can reliably validate data that depends on related data. Developers screw this up on a regular basis, but PostgreSQL has some good solutions.







Yes, client-side validation can always be bypassed completely. You need to do both client side for a better user experience and server side to make sure that the input you get is actually validated, not just supposedly validated by the client.


I'll only repeat it because it's pretty important:

Always check on the server

and add JavaScript for user responsiveness.


The advantage of server-side validation over client-side validation is that client-side validation can be bypassed / manipulated:

  • The end user may have JavaScript turned off
  • The data can be sent directly to your server by someone who doesn't even use your website with a custom app designed for it
  • A Javascript error on your side (caused by any number of things) could cause some, but not all of your checks to be performed

In short - always validate server-side and then consider client-side validation as an extra "extra" to improve the end-user experience.


you always have to validate on the server.

Validation on the client is also helpful for users, but extremely insecure.


Well I still find room to answer.

In addition to Rob and Nathan's responses, I'd like to add that having client-side validations is important. When applying validations to your web forms, be sure to follow these guidelines:

Client side

  1. Client-side validations must be used to filter real requests from real users on your website.
  2. Client-side validation should be used to reduce the errors that can occur during server-side processing.
  3. Client-side validation should be used to minimize server-side round trips so that you save bandwidth and requirements per user.

Server side

  1. You should NOT assume that the validation performed successfully on the client side is 100% perfect. It doesn't matter, even if it serves less than 50 users. You never know which of your users / employees will turn into "evil" and perform malicious activities if you know they don't have the correct validations.
  2. Even if it's perfect for checking email addresses, phone numbers, or valid entries, it can contain very harmful data. What needs to be filtered on the server side, whether it's right or wrong.
  3. If client-side validation is bypassed, your server-side validations will save you from possible damage to your server-side processing. We've heard many stories lately about SQL injections and other techniques that could be used to get some nasty benefits.

Both types of validation play an important role in their respective scope, but the strongest is the server-side one. If you are receiving 10,000 users at any given time, you will definitely be filtering the number of requests sent to your web server. If you discover that there was a single error like an invalid email address, they'll send the form back again and ask your user to correct it, which will definitely use up your server resources and bandwidth. So you'd better apply Javascript validation. Having Javascript disabled will fix your server-side validation and I bet few users might have turned it off by mistake as 99.99% of websites use Javascript and it is enabled by default in all modern browsers.



You can do server-side validation and send back a JSON object with the validation results for each field to keep client javascript to a minimum (just display the results) and still have a user-friendly experience without messing around on both the client and the also having to repeat on the server.



The client side should use basic validation over HTML5 input types and pattern attributes as these are only used for progressive improvements for better user experience (although not supported in IE9 and Safari but we do not rely on them). However, the main validation should be done on the server side.




JavaScript can be changed at runtime.

I propose a pattern where a validation structure is created on the server and shared with the client.

You need separate validation logic at both ends, e.g.

Client-side attributes

server-side.

However, using the same validation specification avoids redundancies (and errors) in mirror validation at both ends.


Client-side data validation can be helpful for a better user experience: for example, a user who types their email address incorrectly shouldn't wait for their request to be processed by a remote server to learn more about the typo they made committed.

Since an attacker can bypass client-side validation (and may not use the browser at all), server-side validation is required and must be the real gateway to protecting your backend from nefarious users.


I came across an interesting connection, the one between differentiates between gross, systematic and random errors.

is perfect for avoiding gross and accidental mistakes. Usually a maximum length for texture and input. Do not imitate the server-side validation rule. Provide your own gross rule of thumb validation rule (e.g. 200 characters on the client side. On the server side dictated by a strong business rule).

is perfect for avoiding systematic errors; it will enforce business rules.

In a project I'm involved in, validation is done on the server using Ajax requests. On the client, I display error messages accordingly.

Further reading: gross, systematic, random errors:

https://answers.yahoo.com/question/index?qid=20080918203131AAEt6GO


If you are doing light validation, it is best to do it on the client. This will save network traffic, which will help your server perform better. If validation makes it difficult to get data from a database or something like passwords, it is best to do so on the server where the data can be securely verified.


We use cookies and other tracking technologies to improve your browsing experience on our website, to show you personalized content and targeted ads, to analyze our website traffic, and to understand where our visitors are coming from.

By continuing, you consent to our use of cookies and other tracking technologies and affirm you're at least 16 years old or have consent from a parent or guardian.

You can read details in our Cookie policy and Privacy policy.