jQuery and Codeigniter form validation

[eluser]Narkboy[/eluser]
OK, first, getting jQuery and CI to play nice means you really have to understand they can't. CI is server-side only; jQuery is client-side only. You need to carefully plan which is doing what and pay a great deal of attention to the handover of information. Ajax is your friend and you must know and love it!

There are several ways of doing what you want:

1) Use jQuery to pass the entire form to CI, which validates and processes.
2) Use jQuery to validate each form field, then POST the entire form to CI for re-validation and processing.
3) Use jQuery to pass each field to CI via AJAX, which validates and sends back a response.

Notice first that CI must ALWAYS validate - JavaScript validation is ONLY for user experience. It cannot be trusted.

How much do you want to avoid a page load? It's gonna cost you a lot of development time! jQuery core doesn't do validation out-of-the-box so grab jQuery Tools (http://flowplayer.org/tools/index.html) and check out the validation in that. It's an add-on to jQuery and works in the same way.

Here's what I would do:

1) Build the form and receiving CI function. Make sure that validates correctly. Ignore the jQuery for this step. Also include validation error msgs into the form view so that is JavaScript is off, it will still work.

2) Ignoring CI, build jQuery validation into the form view.

3) Add a jQuery .click event to the submit button that replaces the default action and sends the form via an AJAX POST request to a different controller (if you're using CI2.0+ you can check for an AJAX call and handle the differences that way). Key point is that you must tell jQuery to disable the default action of the button - otherwise it is sent as normal. This bugged me for ages!

4) That controller validates and processes (adds to db) then sends back a success message that jQuery places into the area where the form was. If CI has validation issues (shouldn't, but you never know), it will return the form with those validation msgs showing.

The difference between the controller functions in 1 and 4 is that 1 returns the entire page (i.e. a full page load) whereas 4 just sends a section. As it's sent async, the page is not reloaded.

Bear in mind that if you're logging new users in directly, you may have to deal with issues around getting info into the session userdata or whatever you're using to track a login.

It's pretty simple if you do it step-by-step. As a rule, the more ajax calls you make, the more complex the whole thing gets.

As you're new to jQuery, play around with the jQuery .load method. It's by far the simplest way to get AJAX info into a page:

HTML-

Code:

<p id="grab">Get Content!</p>
<div id="stage"></div>

JavaScript-

Code:

// Fires when the page has loaded:
$(document).ready( function() {
// Creates a click on the 'grab' text and tells it to run the 'get_stuff' function:
    $('#grab').click( function () { get_stuff(); });
});

function get_stuff() {
// Gets the response from the url and specifies the id to load it into:
    $( '#stage').load('/url/to/content');
};

Seemples!

Hit me if you run into any issues!