EventValidation: Getting Ajax (AJAJ) client side validation working
Posted At : November 27, 2007 3:16 AM
| Posted By : Mark Drew
Related Categories:
coldfusion,
model-glue,
coldspring,
EventValidation
One of the downfalls of the current cfform implementation of validation is that it only does it on the client side (as far as I have used it, it might have changed). So, you design your form, add some client side validation, then realise that people without javascript enabled are sending junk and you have to re-implement the validation server side.
So far so good. But then you are asked to change the validation ("hey, check it really is a creditcard number before we send it to the payment gateway", your boss says) and you implement that on the server side, and then copy the functionality to the client side. The list of changes go on, you go make a cup of coffee and forget to implement one side of the validation somewhere.
With EventValidation, you define your validations in one place and you just define whether you are using client side validation. Lets check it out.
Here is our modified form from before, and you notice, there is only one change, adding client="true" to the ev:setup tag (and make sure you import the form tags from "/EventValidator/taglib/form" as well as the showerror="true"):
<cfimport prefix="ev" taglib="/EventValidation/taglib">
<cfoutput>
<form action="#ViewState.getValue("myself")#register.action" method="post" >
<ev:setup id="ev_Register" successEvent="register.action" client="true" showerror="true">
<div>
<label for="email">email:</label>
<input type="text" name="email" id="email" value="#ViewState.getValue("email")#">
<label for="password">password:</label>
<input type="password" name="password" id="password" value="#ViewState.getValue("password")#">
</div>
<div>
<input type="submit">
</div>
</form>
What happens when you call this page, the form fields are replaced with a normal formfield and a hidden div. Also, javascript links are added to the header (in this case JQuery, the form plugin and the EventValidator setup script), which setup your form and the AJAJ based calls are added to the forms on the page (of course, it only adds it to forms that need it!) And that is it, your headaches gone.
Apart from one, you would need to make a Virtual Directory on your web server to the "EventValidator/scripts" so you can have access to these scripts, but what if you can't do that (or cant be bothered?). The easiest way to change that is to copy the scripts from EventValidator/scripts somewhere else and change the scriptsrc attribute in the ev:setup tag:
Now you are all sorted and can see it working.
The form has passed the validation!
huh? please check the demo link.
"cfform implementation of validation is that it only does it on the client side "? No.
--- Quote from http://www.cfquickdocs.com/?getDoc=cfinput#cfinput... ---
Validation methods ColdFusion provides four methods of validation of cfinput text and password fields.
You can specify one or a combination of the following in the validateAt attribute:
onSubmit The form page on the browser includes JavaScript functions that perform validation before the form is submitted to the server. In Flash format forms, this option is identical to onBlur.
onBlur In HTML format the form page on the browser includes JavaScript functions that perform validation when the field loses the focus. In Flash format, the attribute is equivalent to onSubmit. OnBlur validation uses the same algorithms as onSubmit validation. OnBlur validation was added in ColdFusion MX 7.
onServer ColdFusion performs the validation on the server. Some onServer algorithms vary from the onSubmit algorithms. OnServer Date and Time validation allow more patterns than onSubmit validation. OnServer validation was added in ColdFusion MX 7, and automatically generates hidden fields to support the validation.
You can also omit a validate attribute and specify the type of validation for the field in a separate hidden form field. This form of validation is equivalent to onServer validation, but it allows you to specify separate messages for each validation that you do on the field. It is backward compatible with previous ColdFusion releases. For more information on hidden form field validation, see cfform and Validating form data using hidden fields in Validating form data using hidden fields in ColdFusion MX Developer's Guide.
-- END QUOTE --
But one of the things that I find annoying of tagging it all up on the form itself is that I have had many mixed results with this.
With EventValidation you can reuse rules (and soon) make up atomic rules that you can put together so that you can have a list of validations for a form that can be used in other forms, without you copying and pasting the whole form over.
Besides, not sure I like having my validation code in my view. but yes, CF is wonderful in that it allows you to do these things pretty easily!