by Cedric Dugas on March 21, 2011
Since 2.0 a lot of people wondered how was working the new ajax validation. Doing ajax validation and controlling the submit form event has always been an headache, and while the validation engine aspire to make it as easy as possible, it is probably never going to be simple for junior developers.
To be fair, the ajax feature has been rewritten and was not as mature as in the 1.7 version. However the 2.x base code is starting to be pretty good with the recent updates. If no other bugs popup, I will start tagging the 2.x releases on github and this version will be considered stable for a while.
There is 2 demos added to the repository, one with only the inline validation and another with the inline and submit ajax validations used together.
2 types of ajax validation, first the inline validation
The inline validation calls a file every time someone changes a field, a good example would be checking if a username is available on the blur or keyup event. The inline validation is not called on submit. The inline ajax validation is meant to interact with your users directly, you will have to verify the information on submit too.
We made the decision to clearly separate those 2 concerns, the behavior of inline ajax validation used on submit event was not clear to us (should it submit directly after or not?, etc..) and imposing one sounded like a not so good idea. This means that you will have to share the validation on those 2 events.
So, first you need to setup the inline validation rules in the language file:
// remote json service location
// error text
"alertText": "* This name is already taken",
// success text
"alertTextOk": "* This name is available",
// speaks by itself
"alertTextLoad": "* Validating, please wait"
Once it is setup, you need to add this rule in the field class validation : ajax[ajaxNameCallPhp].
Ok, so the easy part is done, you have the inline validation working on the front-end. Now this will send the field in ajax to the defined url, and wait for the response, the response need to be an array encoded in json following this syntax: [“id1”, boolean status].
So in php you would do this: echo json_encode($arrayToJs);
Obviously you will need to actually do something with the fields in php to validate it, but this is up to you. At this point you should be able to change the boolean value and see the error prompt appear. If you have problem understanding, look at the example in the demos included with the script.
AJAX Submit Validation & sending data
The ajax validation is executed when all the fields are validated, but like a said before, the inline validation will not be executed. The ajax submit validation is just your complete form submitted in ajax, so you can manipulate the data how you want.
I think it is important to note that if you only want to send your data in ajax and not use the error callback from the validation engine, using onValidationComplete will give you more power and maneuverability, but I am not going to go into that, please check the doc on github, it’s pretty straight forward.
So, submit Ajax Validation
You setup the ajax submit validation when you are instancing the plugin, a good example would be :
ajaxFormValidation: mean that the form will always submit in ajax
onBeforeAjaxFormValidation: Do something before the submit ajax validation
onAjaxFormComplete: Do something when the request comes back
By default, you can return a json encoded array with back-end validations that are not succeeding to be interpreted by the validation engine, obviously the engine will show error prompts in that case. You need to follow this pattern:
[[“id1″, boolean,”errorMsg”],[“id2”, false, “there is an error “],[“id3”, true, “this field is good”]]
I hope it will help you guys understand better the ajax feature, for the future I want to add external hooks (using jQuery trigger event) into the engine, and obviously, squash bugs.
In fact some of the triggers are already there but not in the doc yet ;).
If you find bugs in the current release don’t forget to add them on github and if you like the plugin, mentioning the project in your social networks is always appreciated!