CODEWITHSUNDEEP
javascripthtmlajaxforms
tkotitan
tkotitan

Reputation: 3009

Best way to check a form for required fields?

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.

Upvotes: 1

Views: 662

Answers (4)

Peter Bailey
Peter Bailey

Reputation: 105906

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.

Upvotes: 2

lance
lance

Reputation: 16342

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

Related: JavaScript ClientSide vs. ServerSide Validation

Upvotes: 1

Tyler Carter
Tyler Carter

Reputation: 61577

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.

Upvotes: 4

Amber
Amber

Reputation: 527073

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.

Upvotes: 2

Related Questions