2

i'm wondering why i have to validate forms on client side while they anyway need a server side (ajax) validation for not being hacked?

IS there any benefit on having both client side and server side (ajax) form validations?

I mean they do the same thing but ajax takes 300ms and client takes 0ms probably, is this a really good reason why to make a duplicated validation? :P

Plus, using a single server side validation you remove not needed js from client side, i see only benefits in having only ajax validation, what about you?

If i'll go for a client side validation, is there some way/practice/logic to follow to not duplicate validation on server side ? Like ONLY if client side validation is ok server performs the action/request ?

Actually my logic is :

Server + Client side validation less requests -> more code (duplicated) -> more troubles -> better UX Server side validation (only ajax) more requests -> less code -> less troubles -> probably same UX !?

Sorry for maccheronic english asd :D

10
  • 1
    How often are you sending the the ajax requests? How many fields do they fill in? If it is one field then it probably doesn't matter. If it is 10 then I'd personally want feedback as soon as I entered the requested data incorrectly. In my opinion, client side is all about user experience, where server side is to protect your systems (I'm sure that might be viewed as a little too B&W) Commented Jan 30, 2014 at 13:38
  • Well i'm talking about a really simple app, with max 8/9 input to validate ;) , i mean i agree with you especially for apps with many requests and many users , i'm just wondering if i can avoid duplicating the same exact validation :/ Commented Jan 30, 2014 at 13:49
  • 1
    Not all connections process at 300ms. From mobile devices, connections can be spotty and so it is better to make your server calls as infrequent as possible - no matter what their purpose. Commented Jan 30, 2014 at 13:53
  • @NathanielJohnson agree about that :) i need to update question, cause at the end i'm wondering if i can use only client side validation and do something server side for the malicious requests that someone can send :P Commented Jan 30, 2014 at 13:54
  • If you are using an angular Form then you can check whether the form is valid before you submit: docs.angularjs.org/api/ng.directive:form.FormController Commented Jan 30, 2014 at 14:06

2 Answers 2

9

You should be thinking of client-side and server-side validation a separate tools to accomplish separate goals.

The reason that you absolutely should be doing validation on the server side is because there is absolutely nothing preventing me from manually editing the Javascript files to remove any client-side validation. You simply can not prevent that, even if your code is minified and obfuscated (both of which can be un-done).

The reason that client-side validation is nice (but not as necessary as server-side validation) is because it actually assists the user in creating a form that will proceed to pass server-side validation. AngularJS can easily validate a form after every keypress. That is awesome from a user perspective. Think of all of those forms where there is a "Password Strength" meter next to the password field, saying that the strength needs to be "good" or better in order to pass validation. If you were to do an ajax validation call after every keypress, you would increase your server load by orders of magnitude.

The idea is that server-side validation is only going to happen after the user hits the "Submit" button. By the time the user even thinks about hitting the "Submit" button, they should already know that their form is going to pass validation.

However, lets get down to your real problem: You want to enter your validation rules only once. That is awesome! Now you are thinking DRY! The only problem is that this would require using something in the back-end to automatically generate your client-side validation, which can be difficult. The alternative could be to have your front end make a call to the server, asking for the rules, and teach your front-end how to interpret the response. This would be an additional call, but it should be a relatively cheap one. Unfortunately, this is quite a bit of extra work. It may be worth it if you expect your form to change frequently in the near future. Being able to change it in one place instead of two would be a huge boon in that situation, and may be worth the additional time spent up-front.

So, is Client side validation absolutely needed? Well, that depends. Customers can be very finicky, so if this is a form that actually generates revenue for you (bank account application form), then you need to realize that some customers might close out of your web-page if they click "submit" and see their form fill up with red all over the place. It is a much better experience if they are told the problems as they happen, rather than all at once.

If, however, you are creating an intranet application on a deadline, then you may need to look at priorities and make a judgment call ;)

Sign up to request clarification or add additional context in comments.

5 Comments

what in case of a mobile app that runs also on desktop side?
I'm note sure what you are asking. These principles are true pretty much across the board, and mobile applications only exaggerate the need to use client-side validation to improve the user experience, given the unreliable nature of making those ajax calls.
so better to charge an APP/WEBAPP with js than a server with requests?
Ah, I see what you mean. AngularJS is very lightweight, and runs very quickly, even on mobile phones. Hardware on mobile devices is much better and more reliable than their network. The bottleneck on a mobile device is rarely ever the hardware, it is the network, so anything you can do to reduce the amount of network calls needed is going to help you out.
+1 for The alternative could be to have your front end make a call to the server, asking for the rules, and teach your front-end how to interpret the response. , Could you please make it in bold?
3

Assuming you validate all potentially threatening inputs (such as fields that proceed to make SQL queries) on form submission, all form validation should be performed on the client-side, as it makes for a significantly nicer user experience.

I'll reiterate. This assumes you validate all potentially threatening inputs on form submission! It's extremely easy to make a request that completely bypasses your validation and if you blindly put your faith on client-side validations, you may be in for a serious headache in the future.

To answer more specifically, the only time you'd really want to make an AJAX validation is when you need server-side data for the check that can't or shouldn't be sent before validation (such as unique username, email, etc.)

4 Comments

Given your last paragraph, I'm not sure you understand the context of the question. This is flagged AngularJS, And it is common for an AngularJS form to never really do a true "form submission". Clicking the "Submit" button in an AngularJS application usually just creates an AJAX call that sends the data to the server without actually submitting and reloading the entire web-page.
Whether the page reloads or not has nothing to do with my last paragraph. You can't validate a unique username without making a specific request.
Okay, I see what you are saying. When I read your last paragraph, I understood it as "Ajax should only be used when server information is needed, otherwise you should be submitting the form to the server for server-side validation", implying to me that you shouldn't use AJAX to submit the form. I understand now that isn't what you meant.
+1 for reminding about unique username and such fields, that is definitely a check that should never be performed client side, yet still significantly improves the user experience to do before form submission

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.