Friday, May 1, 2009

Data validation, an important part of any application, is useful to ensure that your users enter data properly.
When you create forms, you will need to determine which validation strategy to use, client-side, server-side or maybe mixed. Client-side validation has advantages for the server, the user and the developer, but the problem is that anything running on the client end can never be trusted.

Speaking of server-side validation in CakePHP, its built-in validation mechanism provides a powerful, yet easy-to-use environment. However, when it comes to Ajax form submission, the reality is that it involves a lot of technologies. There are already a number of examples on the web on how to implement data validation with the Prototype JavaScript framework and CakePHP's AJAX helper. But so far there are not so many examples of an integration with CakePHP + jQuery.

Now, we'll take a look at how to do Ajax form validation with CakePHP and jQuery.

Before we start, let's set some goals first:

We need to ensure that the user enter data properly by using CakePHP's validation class

We would like to display an individual error message below each field

We would like to display flash messages on success and failure

We would like to validate multiple models in a single form view

We would like to switch languages based on Localization (shortened to 'l10n')

If the data is saved, we want the user to redirect to another location

We have included the jQuery core and a file that will be specific to this view (No worries, we'll create this file next).

Also, we have added a loading div element with an image inside to handle the loading status of the request. When the user submit the form, the loading image will be displayed until the Ajax call is completed.

Our jQuery code might be confusing to some of you. Yeah, it's kind of a bit long too. If we see those method names, we'll find out briefly what each method does.

We'll submit the form data to /posts/ajax_edit with jQuery's $.post method, and receive data in JSON format.

Let's take a look at the onError method. What's most important here is that the default DOM ID of each field is different from the name we gave it by default. For example, our “title” field corresponds to the DOM ID “PostTitle” (Camel-cased model and field name). So, we need to modify a little the returned JSON data for error messages to show.

NOTE: You may want to change the URL path to meet your Cake settings. We can't use $this->webroot to point to the web root in a separated .js file, so...for example:

// We can use an absolute URL like this:
$.post('/app/posts/ajax_edit', ...
window.location.href = '/app/posts';
// Or simply use a full URL:
$.post('http://www.example.com/posts/ajax_edit', ...
window.location.href = 'http://www.example.com/posts';

The index() is just an empty action which we send the user to after successful form submission, so just skip it. You can also skip the edit and add actions, but notice that we use the same view template (edit.ctp) for both actions just for convenience.

By the way, don't forget to add the RequestHandler component to the $components array, and the Html, Form and Javascript helpers to the $helpers array.

Let's look at our ajax_edit() closely.

We put the actual form elements in our edit (or add) view. Indeed, we post all the data to our Post's controller ajax_edit action.

Technically, there's no big difference with the way we do normally (other than the message handling). The point is that we simply attempt to validate the data, and send all the infomation (no matter what messages we receive after validating or saving the data) to our view.

Now we need some view to return the success/error messages back to jQuery script.

If there is no error, we happily send the user to /posts/index action. We added one gimmick here. We ask the script to wait for 2 seconds before the redirect so that the user can see the success message.

Alright, all done? Did we fulfill the goals we had in the beginning?

There might be some items that are not clear cut:

We would like to validate multiple models in a single form view

We would like to switch languages based on Localization (l10n)

Here is a tip for the first one. Write a proper code for saving multiple models (we don't go through the multiple save stuff here). We can add as many models as we want by doing something like:

31 comments:

Nice tutorial!But I have one question. When I want to add or edit a post, I see the ajax-loader.gif but thats all. No redirect, no flash message and nothing changed in the database, Do you know how to solve this?

It seems like good stuff, although a demo of this working would be very useful.

Just one thing: as far as I know, it's not a good practice to use $this->RequestHandler->isAjax in most of the cases, since it always returns false in IE7. Yeah, I know I hate IE too, but we all have to deal with the fact that it's very common, so...

@MarcoIf you want to run the demo app to see it working:1) Copy all files into the app dir of a clean install2) Run the sql (found in app/config/sql/posts.sql) to create the posts table3) Go to /posts to add or edit your postsGood luck!

@Aku Ma It's a bug fixed already. At least it works on my IE7. Thanks for the info, anyway.

Thanks for this, I can see how this would work theoretically, but I am having no luck so far. I'm having the same problem as Marco, where the ajax-loader div is display:block'd and then nothing... At first I tried coding it myself from your instructions above and then just downloaded your zip and installed into a fresh install that way. No luck on IE7, Chrome or FF. Any ideas?

In the head section of the layout, you can also do something like this: <script type="text/javascript">var webroot = '<? echo $this->webroot; ?>';</script>And then in the .js file:$.post(webroot + 'posts/ajax_edit', ...Andwindow.location.href = webroot + 'posts';

@kyoI've made some visual improvements in the JS file which I thought I would share with you guys as a token of thanks. I've basically added some nice effects from the jqueryui and made things a touch slicker. Edit your code with the following, try submitting the add posts form a number of times and you'll see what I mean. Here are the mods:

First of all, go to http://jqueryui.com/download and build a custom download making sure all the effects are selected. Then include the jquery-ui-1.7.1.custom.min.js file from the zip in edit.ctp like so:

Hi dannyboy,your code looks very cool, but its throwing a failure in my firebug:G is undefined[Break on this error] (function(){var l=this,g,y=l.jQuery,p=l.....each(function(){o.dequeue(this,E)})}});Its in line 12 on jquery-1.3.2.min.js

@LurkerYes, good point! if you are working on a single-language site, the validation messages should simply be placed in the model.Since this tutorial covers the L10N for multi-language, I did it that way.

@vinodkalpaka1) Set other rules in your model, and then add error messages to the $errorMessages array (ajax_edit.ctp)

2) Sure. You can use returned data in the onSuccess() method (posts_edit.js) to update some div's content dynamically. If you have Firebug enabled in Firefox, use console.info(data) to see what data comes back.

Thanks for the great code. I modified the code to fit my needs. I needed to use the validation model cakephp, validation for single fields and multiple models. Theerfore, when the user left a field the model validates the input and returns an error message for the field. Apparently, it does not work with checkboxes. So here is my code: