Performing both client side and server side validation using jQuery and CodeIgniter

Question

What is the right way of doing both client side and server side validation using jQuery and CodeIgniter? I am using the jQuery form plugin for form submit. I would like to use jQuery validation plugin (http://docs.jquery.com/Plugins/Validation) for client side validation and CodeIgniter form validation on the server side. However the two don't seem to gel together (or I am unable to get my head around it). Can someone help please? Whether its a client side validation or server side validation, the user should see consistent UI displaying error messages next to the input fields.

[Edit] It appears that I can pass server side errors to showErrors() like here (http://forum.jquery.com/topic/jquery-validation-showerrors-error). However, if I am doing extra server-side validations (like checking if username is already taken) that aren't present in the client-side rules, then the validation plugin clears these validation messages when user tabs out of these fields.

Answer 1

What is unclear? Each method will be distinct.

At a high level, essentially you will use the client-side validation before submitting your form data. If the client side checks pass, then submit the form and run your validation server-side. If the server-side validation fails then it should print an error when the page is re-rendered, and likewise if the validation/save succeeds.

Answer 2

Is it that you don't want to duplicate your server side validation rules and messages in your client side validation? This isn't supported in the core CodeIgniter framework.

I took a look around on the CodeIgniter wiki and someone has written a library to generate javascript from server side validation rules. I haven't tried it. But it might be what you are looking for.

Answer 3

I wanted to do the exact same thing, it can be done but it is tricky. What you could do is create solid server-side validation methods, which you call using Ajax remotely. If no javascript is enabled, you just use the normal server-side validation methods without remote calls. This way, you will have only one code base for validation.

The problem is, however, that your client validation then will be a lot slower, since it constantly has to communicate with the back-end. An even bigger problem is that you can then not make use of some powerful client validation libraries, since they all assume the validation is done on the client, not remotely.

I simply gave up on accomplishing this. I had to duplicate my validation logic and error message on the client and the server. It is not ideal, but best for the user experience and you will be able to make use of great front-end libraries.