Question

This is a rather open-ended question, however I would like to know what are the recommended methods of validating user input in a registration form, and relaying to the user what, if any, information needs to be changed before trying to submit again. Right now, I have my forms setup with some HTML attributes such as maxlength, but that obviously isn’t reliable. So in the PHP code, I have it filter out strings exceeding the length, sanitize input, and such.

However, if the input given is invalid, I have the PHP code redirect the user back to the registration page, which just displays normally, without the user’s previous input, and without any indicators of what needs changing.

This is obviously unacceptable, so I need to know if I should use JavaScript as an intermediary means of validation and to display indicators, or if I should use session variables to relay the previous inputs, and denote which fields to display errors for. Or, something else entirely.

Hopefully, my question is clear, and all help is much appreciated!

EDIT: Is a user having JavaScript disabled a realistic concern that should be taken into consideration for this type of thing?

Answer 1

Your answer is simple:

BOTH.

First, do initial validation on the client-side.
This isn’t about doing user-checking/authenticating/authority-levels (at least not yet).
There might be exceptions made, in the case where you use an AJAX call to check if somebody’s trying to create an account with an email address that’s already registered, or that sort of “safe” (do sanitize… …everything) check.

It’s about: “Does this field pass an idiot-check”.

That’s what JS-validation should be for.
If it fails, set css classes on the field, which let people know, visually, that something’s up. Look into css :before and :after pseudo-selectors, which let you do things like add text or images before/after the thing you’re styling (input in this case)

input.valid:before { content : url("checkmark.png") }
input.invalid:after { content : url("big-red-x.png") }

You can dynamically add in tool-tips or message-banners which give user-friendly info about the error.

All of this stuff can be gotten around by people who know how to submit a POST request, using one of the many dev-friendly web solutions (or just really-bored people who are going to do it with scripts from their own server, if your site is that open).

That’s why you still need to validate using PHP.

This is also the time you sanitize EVERYTHING (or use PDO as your database access layer, and use their pre-sanitized solution).
And then you can start looking to your database for things like authority and whatnot.

If there’s an error on the PHP side of things, dump them back onto the page that they were already on, with their old values filled in already.

From there, either trigger a JS validation error, with some server-side message…
…and run the JS validation again, to pick up errors in fields
…and also (for non-JS people, though you can hide/remove this on pageload) include a static banner somewhere for holding the list of errors you hit in PHP.

This can go as deep as you’d like, and you can rig all of this up to run through a series of AJAX calls, with PHP-errors being returned in an errors array, back to the page, to be parsed and either applied to the improper fields, or put in a central banner somewhere…

Like you said, this is a pretty open-ended question.

So your goals from a high-level, in terms of the client are,
1. provide responsive (/immediate) user-friendly feedback, when something is incorrect
2. make the feedback concise, unambiguous and actionable
3. do as much as possible without causing me to rewrite everything, or navigate back and forth between pages — ultimately, the dream would be to have 0 page changes between filling the form and being inside of the thing that I was trying to access.