It took me a while to learn how to add validation using the $ajax->form() of cakePhp. I think the ajax helper simplifies your work for ajax calls but you should first understand how to use it. The manual isn’t that helpful in explaining the deatails of this helper. Here is one example that I used in an application I am involve with and this hopefully could brighten someone’s day.
In my view.thtml, I have this form
<?php
// !important: name your form
$form_options['id'] = ‘myform’;
$form_options['update'] = ‘my-results’;
// this is where you’ll call the validation function
$form_options['before'] = ‘if (!validate()) return false;’;
echo $ajax->form(‘/controller/action’, null, $form_options)
?>
<div id=”errMsg”></div>
<table>
<tr valign=”top”>
<td nowrap><span class=”required”>*</span> Subscription type </td>
<td><div id=”ModelType”><?php echo $html->radio(‘Model/type’, $my_type, ‘<br />’) ?></div></td>
</tr>
<tr valign=”top”>
<td nowrap><span class=”required”>*</span> Receive updates </td>
<td><div id=”ModelRange”><?php echo $html->radio(‘Model/range’, $my_range, ‘ ‘) ?></div></td>
</tr>
</table>
</form><div id=”my-results”></div>
The validation looks like this
function validate() {
var validation_cnt = 0;
// you must delete the previous message
removeMsg(['err1', 'err2', 'err3']);
// begin the validation
if (isRadioEmpty(“myform”, “data[Rss][type]“)) {
insertMsg(‘RssType’, 1, ‘This is required.’);
validation_cnt++;
}
if (isRadioEmpty(“myform”, “data[Rss][range]“)) {
insertMsg(‘RssRange’, 2, ‘This is required.’);
validation_cnt++;
}
if (validation_cnt > 0) {
var req_msg = ”;
if (validation_cnt == 1) {
req_msg = ‘Found ‘+ validation_cnt +’ error. Please double check your answers. Some fields are required.’
} else {
req_msg = ‘Found ‘+ validation_cnt +’ errors. Please double check your answers. Some fields are required.’
}
insertMsg(‘errMsg’, 3, req_msg);
validation_cnt = 0;
return false;
}
return true;
}
One problem I had with this one is that I need to validate radio buttons. But since cakePhp uses illegal characters in its name, you cannot just use the normal call for it. I found an explanation of how to do this here. Here is the function that validates the radiobuttons:
/**
* Returns true if any of radio boxes with the NAMEs of elementName contained in the FORM named formName is checked
*
* @param formName – ID of the FORM
* @param elementName – NAME of the radio boxes
* @author: Rachel
*/
function isRadioEmpty(formName, elementName) {
var empty = true;
for (i=0; i<=document.forms[formName].elements[elementName].length – 1; i++) {
if (document.forms[formName].elements[elementName][i].checked) empty = false;
}
if (empty) return true;
return false;
}
I am also using some prototype methods to insert the error messages at the bottom of the fields and count the errors. Here is the function for that
/**
* Insert error message after the element containerID
* Add style to class errFld to add style to the error message
* You can delete the previous message created by using @link removeID(‘err’+errID)
*
* @param containerID – ID of an element preceeding the error message
* @param errID – any unique ID that you can give to the error message to uniquely identify it
* @param msg – message
* @param containerType – default value is DIV tag
* @author: rage
*/
function insertMsg(containerID, errID, msg, containerType) {
if (!containerType) containerType = ‘div’;
new Insertion.After(containerID, ‘<’+containerType+’ id=”err’+errID+’” class=”errFld”>’+msg+’</’+containerType+’>’);
}
/**
* Delete the element if it exist. Do nothing if it doesnt exist
*
* @param id – element IDs
* @author: rage
*/
function removeMsg(ids) {
for (x=0; x<=ids.length – 1; x++) {
try { Element.remove(ids[x]); } catch (err) {} // do nothing
}
}
You can check the whole code for simplicity here.
