mcurry / js_validate Goto Github PK
View Code? Open in Web Editor NEWCakePHP Plugin - Convert model validation rules to JavaScript and apply on the frontend using jQuery
CakePHP Plugin - Convert model validation rules to JavaScript and apply on the frontend using jQuery
/* * CakePHP jQuery Validation Plugin * Copyright (c) 2011 Matt Curry * www.PseudoCoder.com * http://github.com/mcurry/js_validate/ * http://sandbox2.pseudocoder.com/demo/validation * * @author mattc <[email protected]> * @license MIT * */ /* Notes */ * This helper requires jQuery. Sorry to all you Prototype/script.aculo.us users. * Tested on CakePHP 1.2.5 Stable and jQuery 1.3.2 /* ReadMe */ 1. Download the plugin and put it in /app/plugin/js_validate 2. Optionally, put jquery.validation.min.js somewhere in your /app/webroot/js. 3. Include the helper in any controller that will need it. var $helpers = array('JsValidate.Validation'); 4. Include the Javascript files in your view. If you are already using jQuery throughout your app, and it is included in your layout, you can removed it from the line below. If you copied jquery.validation.min.js to your /app/webroot/js: $this->Html->script(array('jquery', 'jquery.validation.min'), false); Alternatively, you can use the JavaScript right from the in the plugin directory: $this->Html->script(array('jquery', '/js_validate/js/jquery.validation'), false); The downside to using this method is the javascript is loaded through PHP, which isn't as fast. 5. Then in the views for your forms, call the helper. Replace "Model" with the model name for the form. echo $validation->bind('Model'); /* Extra */ 1. You can pass a second param to the method call above, which is an array of options. The available options are: * form - Any valid jQuery selector. Defaults to "form". If you wanted to target a form you'd most likely pass "#formId" * inline - Setting this to true will return the ouput for direct echoing. If false then the codeblock will be added to the output of $scripts_for_layout for display in the HEAD tag. * messageId - The id of a div where all the validation messages will be displayed. 2. If a particular field fails the input will be marked with the css class "form-error" and the message will be added after the field with the class "error-message". This is the same as Cake would do if you submitted to the server. In addition you can specify a div messageId and all the messages will be shown there as well. <div id="message"></div> /* Custom Rules and Error Handling */ 1. At the moment there are three callbacks: beforeFilter, setError and afterFilter. beforeFilter - called before validation is started. No params. afterFilter - called after validation is done. Passed an array of errors. setError - called anytime a validation error is found. Passed the field and the error message. If you wanted some alternate handling for errors you could do something like this: $.fn.validate.setError = function(field, message) { //don't ever do this or I will come for you alert(message); } 2. It's up to you to write the custom function and you're free to use Ajax here. For example if you had a custom validation rule “myRule” you would define the function like this: $.fn.validate.myRule= function(val, params) { //do some validation here and return either true or false. } /* Manual Form Handling */ You can disable the auto binding to the form by adding setting the catch option to false: echo $validation->bind('Model', array('catch' => false)); Then catch the submit and run the validation manually: $("#ModelForm").submit(function(event) { //your own code here //run the validation valid = $.fn.validate.check($(this).data("validation")); //more code return valid; }); /* Tests */ 1. CakePHP unit tests are available through the normal /test.php 2. JavaScript unit test can be run by visiting /js_validate/test. /* Tips */ * I wrote an article for PHPArch about JavaScript validation(http://c7y.phparch.com/c/entry/1/art,improved_javascript_validation), which raised some concerns that this approach may reveal too much about an application's security. If this is a concern for you, but you still want to use this helper, there is an option to whitelist rules can be applied on the client side. To use to this feature set the list in your bootstrap.php: Configure::write('javascriptValidationWhitelist', array('alphaNumeric', 'minLength'));
When using server-side validation, CakePHP appends the error message to the div of the input with the error.
However, the validation plugin inserts the error message after that div, which (in some cases) breaks the style.
The following patch solves the problem:
--- a/vendors/js/jquery.validation.js
+++ b/vendors/js/jquery.validation.js
@@ -158,7 +158,7 @@
//add the form-error class to the input
$("#" + field).addClass("form-error")
.parents("div:first").addClass("error")
.after('<div class="error-message">' + message + '</div>');
.append('<div class="error-message">' + message + '</div>');
};
$.fn.validate.beforeFilter = function() {
Good stuff. However, copying in the sample code from README leads to the opts field being empty. Additionally, I can't seem to get a response even when I use something like "$.fn.validate($("#PictureUploadForm").data("validation"), {"root":"/","watch":[]});"
Hello,
I have a failed test case for testUrl:
Equal expectation fails at character 1555 with [...museum|travel))(?::[1-9][0-9]{0,4})?(?:\/?|\/([!"$&'()_+,-.@:;=~\/0-9a-z]|(%[0-9a-f]{2})))?(?:?([!"$&'()_+,-.@:;=~\/0-9a-z]|(%[0-9a-f]{2})))?(?:...] and [...museum|travel))(?::[1-9][0-9]{0,4})?(?:\/?|\/([!"$&'()_+,-.@:;=~\/0-9a-z\p{L}\p{N}]|(%[0-9a-f]{2})))?(?:?([!"$&'()*+,-.@_:;=~\/0-9a-z\p{L}\p{N...] at [/plugins/js_validate/tests/cases/models/js_validate.test.php line 203]
/plugins/js_validate//tests/cases/models/js_validate.test.php -> JsValidateTestCase -> testUrl
I am not sure if this affects anything.... Just reporting it in!
It would be nice if the error messages shown in the summary (configurable with the 'messageId' option) were actual links to edit the fields. Or, at least, having some options to configure the way this summary is displayed would help making the server-side and client-side validation look the same.
Here's an example of a form with errors handled the way I mean: http://www.usability.com.au/resources/wcag2/form7.html
When you write multiple line in a input textarea, rule "minLength" don't accept.
I solve it by this code in "validation.php" l.203 :
case 'minLength':
return sprintf('/^.{%d,}/', $params[0]);
case 'maxLength':
return sprintf('/^.{0,%d}/', $params[0]);
where and how can I add my custom function ?
I follow the instruction in README
2. It's up to you to write the custom function and you're free to use Ajax here.
For example if you had a custom validation rule �myRule� you would define the function like this:
$.fn.validate.myRule= function(val, params) {
//do some validation here and return either true or false.
}
but I don't know where I add this code
I added it in view , it but dosn't work
I think the jquery.validation.js and jquery.validation.min.js have different code
I have empty validation rules array in the object parameters but I set it up in the beforeValidate method.
Because this method is not executed by the Plugin my array stays empty end therefore there is no validation JavaScript code in the page.
There is an easy fix, just run beforeValidate in the helper class:
Line: 47
$model = classRegistry::init($modelName);
$model->beforeValidate();
$arr=explode('.',$modelName);
hi
thanks for very good plugin
but it use old version of cakephp
i tried to upgrade it to cakephp 2.x but i have some errors ... please upgrade it ...
Hi, I've followed the instructions, and am getting the jQuery validation code appearing on the screen, but upon hitting submit, it doesn't trigger.
Use case: using a jquery dialog box, where you manually call post via javascript. You would want to validate before you post and close the dialog box. The submit button is not output via php but through JS. The form actually never gets "submitted" in the traditional sense the fields are just grabbed and sent through post.
Hi, I saw that sometimes the parameter val in the function $.fn.validate.validateRule is null, I would suggest to add
if(val == null)
return false;
at the beginnning of that function.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.