What is the best way to repopulate a form and display errors with no-script?

Question

I'm building an application which uses ajax calls for form validations and some others, problem is that I don't like it when those validation errors shows up on a new page with no css at all and form completely gets reset without the javascripts.

I'm talking about a dozen forms so, it will be quite annoying for the user to go through forms over and over again.

I've read some answers on this topic, but is there a specific way, a best-practice for a situation like this (more along the lines of form validation)?

Apologies if there is an answer already.

Edit:

All validations are done on the server-side, currently the errors are being displayed with the help of ajax. What I'd like is a convenient method for repopulating the form and display errors without javascript if an error occurs while processing the form.

Answer 1

Form validation should be written on the server first, on the client later. You should be validating on the server in any case. Don't rely on Ajax for something as simple and as crucial to the operation of your site as form validation. Using unobtrusive scripting, you can prevent the default form submittal and then process the form using Ajax. Otherwise, allow the submit to go through and respond with a server-generated validation page.

Answer 2

I'm not sure if you're implying by your question that you don't validate on the server - this would be considered a huge security hole as quite obviously forms could be bypassed by simply disabling Javascript. You have to validate in the server every time, while client-side validation is simply nice to do.

Furthermore, the "problem" of having the forms reset themselves when the page is reloaded becomes moot when you use a decent framework - In Python, Django auto-repopulates forms in the case of errors. In PHP, CakePHP and CodeIgniter do as well, and I'm sure most good frameworks do this, as it falls under the category of "common tasks" that frameworks are supposed to abstract away.

Whenever I'm not using a framework, I write up my own little Form class that fills the need.

EDIT:

I am not aware of anything you could plug-in to what you have to be able to repopulate the form. Your best bet is writing your own little class for it, which should take no more than 1 hour.

Answer 3

Perform your validations on the server-side and repopulate the forms.

Validation via AJAX is nice, but cannot be enforced. Thus, it is more effective to make the validations be performed whether or not the AJAX happens. I would suggest a second route that can handle the validations and pass back an array of errors in JSON for those who have javascript. But for those without javascript, the only way your validations will work is through the server-side.

You don't really get a choice in this, unfortunately. Any halfway decent programmer or hacker with firebug can edit your javascript, detach hooks, and get around everything you're trying to do on his side: be paranoid and enforce validation on the server side.

Answer 4

What I normally do is store all the error strings in an array in a session variable (I use PHP). If there's an error on the server-side, redirect the user back to the form page, check for the session var, and display the errors as appropriate. Make sure you unset the session var to free up memory after you display it. Same goes for repopulating the form -- values in a session var.