Automagic JavaScript Validation Helper - Beta
Way back when CakePHP had a wiki there were a series of articles on "Advanced Validation." One aspect of these articles was using the Model rules in JavaScript to validate on the client side. The code (I believe this is it) was originally for CakePHP version .10 (iirc). I had been using a heavily modified version of this code even in my 1.2 projects, but it was due for a ground up re-write.
I wrote an article for PHPArch not too long ago with a generic PHP approach for JavaScript validation. Using that JavaScript as a base, I created a helper to convert the model rules into JavaScript.
Here are the links:
Download
Instructions
Demo
This is all very beta, so please let me know if you find an issue. The helper should work with the three formats for defining validation in your model (output from bake, one rule per field, multiple rules per field).
If you are worried about security, there is an option to only include certain rules. See the tips section at the end of the instructions. Thanks to Marc for suggesting this.
42 Comments
but, I should add I have used with some success a js library which complements the CakePHP method - you just add a class name and it is very similar / simple to get going.
http://tetlaw.id.au/view/javascript/really-easy-field-validation
Thanks for the link. I'm sure you could write a helper that takes your model validation rules and converts them into a format suitable for this lib.
-Matt
The best solution would be one that can convert some of the cake validation logic into javascript for the sake of speed and then seamlessly use xhr calls to check the other fields (and ultimately falling back to server-side checks if js is not available).
This is doable with http://docs.jquery.com/Plugins/Validation but there are a couple snags with the current implementation plugin:
- it doesn't currently allow returning of error messages (should be trivial)
- (as far as I can tell) it will use a http request for each field which also means they're submitted separately
Regardless,
Thanks for your work Matt!
I am facing a problem with your Helper.
I have followed your instructions but nothing happens, no error, no message.
Do you know if it is compatible with jquery-1.2.6 ?
Would it be possible that you also give your model/controller/view samples ?
Thank you in advance
The div on the view must be called " messages ".
And theses lines where missing :
validation.js :
$("#"+field).addClass("form-error");
$("#"+field).after(''+this['message']+'');
So you must have :
if (!valid)
{
//add the error message
$("#messages").append("" + this['message'] + "");
//highlight the label
$("label[for='" + field + "']").addClass("error");
// Display the message after the input
$("#"+field).addClass("form-error");
$("#"+field).after(''+this['message']+'');
}
Hope it will help :-)
The helper does work with Jquery 1.2.6. Everything you need to get going should be at http://sandbox2.pseudocoder.com/demo/validation
Fields with the "blank" rule should be excluded since they are typically not on the forms. I added this to the line that checks for the "on" rule.
It doesn't work with any multiple field inputs such as date, datetime, etc. To deal with this I changed the rules to use field names instead of ids. I added a check for the column type ($model->getColumnType($field)) and add month, day, year, etc to the names as appropriate.
Is this helper works in CakePHP 1.2?
I am working on cakephp 1.2. After following every step of this tutorial, then nothing is happening, form is submitting without showing javascript validation error? same like your Demo example. (why not your Demo example showing Java script error before form submitting )
$(document).ready(function(){ $("#UserSignupForm").submit( function() { return validateForm(this, rules); }); });
var rules = .................. don't writing complete code
when I use alert('hello '); in validation java script then above generated code is not calling validateForm() function, I am trying it from last two days but not working.
please help me
The helper does work in 1.2. You can get the latest version at:
http://github.com/mcurry/cakephp/tree/master/helpers/validation
I use this sort of code in view:
echo $form->input('nickname', array(
'label'=>__('Nickname', true),
'error' => array(
'len' => __('Lenth must be 8..15 chars', true),
'uniq' => __('This nickname is not unique', true),
)
));
i.e. model contains no messages.
'message' => __('error', true)
in $validate array is not valid.
You'll have to do the same when you output the error if the JavaScript validation is bypassed.