thecrumb

developer | thinker | tinkerer

ValidateThis – Day 2: Setting Up The Form


  • Tuesday, March 08 2011

So you should have ValidateThis installed.  Today we'll configure a simple form for a FAQ and add some validation rules.

Before we add our form we'll setup some things for ValidateThis.  First we'll add the necessary jQuery libraries. There are various ways to do this but here I'm using the new Asset Manager component in Model-Glue to load my .js files.

<cfset event.addJSAssetFile( "validate/jquery.validate.pack.js" ) />
<cfset event.addJSAssetFile( "validate/jquery.field.min.js"  ) />

Next we need to setup our ValidateThis service. getInitializationScript() is going to setup our client side jQuery for us - here I'm telling it not to include the requires jQuery libraries as I'm managing that manually.  In the latest ValidateThis you don't even have to install jQuery - it can pull the necessary files from a CDN.  getValidationScript() will actually look at our rules file and create the specific jQuery validation rules for our form.

<cfset validationService = event.getModelGlue().getValidationService() />
<cfset event.addJSAssetCode(validationService.getInitializationScript(JSIncludes=false)) />
<cfset event.addJSAssetCode(validationService.getValidationScript(objectType="faq")) />

Finally we can get a list of required fields from our rules file.  Here I am passing in my object type so ValidateThis knows what rules to apply.

<cfset variables.requiredfields = validationService.getRequiredFields(objectType="faq") />

I'm using the excellent cfUniform library for my forms.  Below we setup our form, and you can see I'm passing in my the "requiredFields" we defined earlier.  cfUniform will use this to flag the fields as required with an asterisk.

Below is my simple form.  You'll notice there is no markup for validation rules!

<uform:form action="#commitEvent#"
 id="frmMain"
 attributecollection="#CFUniformConfig#"
 submitValue=" Save FAQ "
 requiredFields="#requiredFields#"
 cssLoadVar="uformCSS"
 jsLoadVar="uformJS">

<uform:fieldset>
<uform:field label="Question"
 name="faqquestion"
 type="text"
 value="#faqRecord.getFaqQuestion()#" />

<uform:field label="Answer"
 name="faqanswer"
 type="textarea"
 value="#faqRecord.getFaqAnswer()#" />

</uform:fieldset>
</uform:form>

But, if we load this in our browser and view source, we'll see our jQuery libraries loaded and then some code for ValidateThis (created by getInitializationScript()):

<script type="text/javascript" src="/modelglueextensions/jQuery/validate/jquery.field.min.js"></script>
<script type="text/javascript">
 jQuery(document).ready(function() {
 jQuery.validator.addMethod("patterns", function(value,element,options){
 var minMatches = 1;
 var complexity = 0;
...
 , jQuery.format("")); jQuery.validator.addMethod("futuredate", function(value,element,options) { var dToday = new Date(); var dValue = new Date(value); if (options.after) { dToday = new Date(options.after); } return (dToday < dValue); } , jQuery.format(""));
 });
</script>

If we keep scrolling we'll see our form specific validation code:

<script type="text/javascript">
jQuery(document).ready(function() {
$form_frmMain = jQuery("#frmMain");
$form_frmMain.validate();
if ($form_frmMain.find(":input[name='faqquestion']").length) {
 $form_frmMain.find(":input[name='faqquestion']").rules(
 "add", { required : true, messages: {required: "The question is required."}
 });
 ...
</script>

And if we examine the form itself we'll see our required fields (which we told cfUniform about) have been flagged with a 'required' class:

<input name="faqquestion" id="faqquestion" type="text" class="required" />

Checking out the form itself we can see our required fields are marked:

Required fields

And submitting the form with empty values gives us nice, user friendly error messages:

Friendly errors

In the next post we will look at server side validations and adding some additional constraints to our rules file. We'll  also explore the power of 'contexts' which allow you greater control over what gets validated and when.


Installing Redmine Mylyn Connector Easy Maintenance Mode with Ant