Best way to check a form for required fields?

Question

Just a brief best-practices question: what is the best way to do required field checking for a form? I see 3 choices:

1. Server side. reload the page with an error message.
2. Javascript (Client-side) for user-friendly non-reloading, also duplicate requirements on server side and sanitize input.
3. AJAX - best of both worlds, use JS to ask the server if the required field is met.

I guess there is no good definition of what I mean by "best." I would like to know what is optimal, elegant, maintainable, secure, and reliable. Also user experience is key. I'm willing to assume the user does not have JS turned off. The back-end could be anything but I am thinking in PHP.

Answer 1

The overall rule should be that Javascript should 'complement' server side validation. Because Javascript can be turned off or even messed with. (Greasemonkey?)

I'd say jQuery Validator, and then Serverside Validation. That way people with Javascript enabled get the benefits of not having to refresh to get errors, but it is smoothly degradable.

Whether you use AJAX to submit fields is up to you, but you shouldn't use it for validation unless it is things like checking if a name/email is available. Better to just let JavaScript validate it while the user is typing, because not having to send requests to the server is both faster and more efficient.

Using only a JavaScript method would allow people to bypass validation if they turned javascript off. So always validate the data again when it gets passed to the server.

Answer 2

The best "best": Whatever you choose, make sure you include serverside validation in your solution.

Related: JavaScript ClientSide vs. ServerSide Validation

Answer 3

1 is secure, but not as friendly to the user. If development time is at a premium, it'll do in a pinch.

2 is secure only if you duplicate validation on the server as you mentioned, which takes more effort (since you're effectively writing the same code twice) but gives the best user experience.

3 is secure and friendly to the user, but doesn't provide feedback as quickly to the user as client-side Javascript could.

There's not really a set "best" here, just pick whichever fits both your time budget and user-friendliness desires.

Answer 4

My thoughts on your list

1. Easiest to implement. Should require very few round trips to the server as part of the validation process.
2. Nice user experience at the cost of validation-rule duplication. While you can have your server-side code generate the javascript validations for you, not everything can be mimicked in javascript (e.g., certain PCRE rules, pre-verifying the availability of a username, or spell-checking). However, this method should be achievable in 95% or more of cases.
3. Nice user experience at the cost of increased HTTP messaging and application complexity. The upside here is that you don't duplicate any validations - the server handles it all. The downside is that you increase complexity. Every validation round-trip needs a feedback-loop to the user (i.e., "loading..." text) and fail-overs should the request fail for some reason. Also, some validations could be complex to do correctly, such as dependent validations (e.g., field B is required only if field A is blank)

I can't make any specific recommendation because I think it just "depends". It's a horrible answer but I think that's just how it is.