JavaScript: client-side vs. server-side validation

JavaScript: client-side vs. server-side validation

Which is better to do client side or server side validation?
In our situation we are using

jQuery and MVC.
JSON data to pass between our View and Controller.

A lot of the validation I do is validating data as users enter it.
For example I use the the keypress event to prevent letters in a text box, set a max number of characters and that a number is with in a range.
I guess the better question would be, Are there any benefits to doing server side validation over client side?

Awesome answers everyone. The website that we have is password protected and for a small user base(<50). If they are not running JavaScript we will send ninjas. But if we were designing a site for everyone one I'd agree to do validation on both sides.

Solutions/Answers:

Solution 1:

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

Client Side

You want to validate input on the client side first because you can give better feedback to the average user. For example, if they enter an invalid email address and move to the next field, you can show an error message immediately. That way the user can correct every field before they submit the form.

If you only validate on the server, they have to submit the form, get an error message, and try to hunt down the problem.

(This pain can be eased by having the server re-render the form with the user’s original input filled in, but client-side validation is still faster.)

Server Side

You want to validate on the server side because you can protect against the malicious user, who can easily bypass your JavaScript and submit dangerous input to the server.

Related:  JavaScript Editor Plugin for Eclipse [duplicate]

It is very dangerous to trust your UI. Not only can they abuse your UI, but they may not be using your UI at all, or even a browser. What if the user manually edits the URL, or runs their own Javascript, or tweaks their HTTP requests with another tool? What if they send custom HTTP requests from curl or from a script, for example?

(This is not theoretical; eg, I worked on a travel search engine that re-submitted the user’s search to many airlines, bus companies, etc, by sending POST requests as if the user had filled each company’s search form, then gathered and sorted all the results. Those companies’ form JS was never executed, and it was crucial for us that they provide error messages in the returned HTML. Of course, an API would have been nice, but this was what we had to do.)

Not allowing for that is not only naive from a security standpoint, but also non-standard: a client should be allowed to send HTTP by whatever means they wish, and you should respond correctly. That includes validation.

Server side validation is also important for compatibility – not all users, even if they’re using a browser, will have JavaScript enabled.

Addendum – December 2016

There are some validations that can’t even be properly done in server-side application code, and are utterly impossible in client-side code, because they depend on the current state of the database. For example, “nobody else has registered that username”, or “the blog post you’re commenting on still exists”, or “no existing reservation overlaps the dates you requested”, or “your account balance still has enough to cover that purchase.” Only the database can reliably validate data which depends on related data. Developers regularly screw this up, but PostgreSQL provides some good solutions.

Related:  Check if first letter of word is a capital letter

Solution 2:

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

Solution 3:

I am just going to repeat it, because it is quite important:

Always validate on the server

and add JavaScript for user-responsiveness.

Solution 4:

The benefit of doing server side validation over client side validation is that client side validation can be bypassed/manipulated:

  • The end user could have javascript switched off
  • The data could be sent directly to your server by someone who’s not even using your site, with a custom app designed to do so
  • A Javascript error on your page (caused by any number of things) could result in some, but not all, of your validation running

In short – always, always validate server-side and then consider client-side validation as an added “extra” to enhance the end user experience.

Solution 5:

You must always validate on the server.

Also having validation on the client is nice for users, but is utterly insecure.

Solution 6:

Well, I still find some room to answer.

In addition to answers from Rob and Nathan, I would add that having client-side validations matters. When you are applying validations on your webforms you must follow these guidelines:

Client-Side

  1. Must use client-side validations in order to filter genuine requests coming from genuine users at your website.
  2. The client-side validation should be used to reduce the errors that might occure during server side processing.
  3. Client-side validation should be used to minimize the server-side round-trips so that you save bandwidth and the requests per user.
Related:  Why is getting a member faster than calling hasOwnProperty?

Server-Side

  1. You SHOULD NOT assume the validation successfully done at client side is 100% perfect. No matter even if it serves less than 50 users. You never know which of your user/emplyee turn into an “evil” and do some harmful activity knowing you dont have proper validations in place.
  2. Even if its perfect in terms of validating email address, phone numbers or checking some valid inputs it might contain very harmful data. Which needs to be filtered at server-side no matter if its correct or incorrect.
  3. If client-side validation is bypassed, your server-side validations comes to rescue you from any potential damage to your server-side processing. In recent times, we have already heard lot of stories of SQL Injections and other sort of techniques that might be applied in order to gain some evil benefits.

Both types of validations play important roles in their respective scope but the most strongest is the server-side. If you receive 10k users at a single point of time then you would definitely end up filtering the number of requests coming to your webserver. If you find there was a single mistake like invalid email address then they post back the form again and ask your user to correct it which will definitely eat your server resources and bandwidth. So better you apply javascript validation. If javascript is disabled then your server side validation will come to rescue and i bet only a few users might have accidentlly disable it since 99.99% of websites use javascript and its already enabled by default in all modern browsers.