Author: Steven Neiland
Published:

Warning: This blog entry was written two or more years ago. Therefore, it may contain broken links, out-dated or misleading content, or information that is just plain wrong. Please read on with caution.

Im super busy with work at the moment so this week Im just going to a do a quick 101 post.

Aside: I am not a fan of cfform in general but sometimes you don't get a choice in what technologies you have to work with.

Triggering CFForm Validation With AJAX

Normally when you use the cfform tag ColdFusion triggers its validation javascripts when you click the submit button. However when you use ajax to submit a cfform the trigger event which calls the validation scripts does not execute. So in order to get the validation running again we need to manually add the validation trigger to the ajax submission javascript.

Example: Validation Not Working

Lets take a simple cfform example where clicking the submit button calls an ajax submission function.

<cfform name="TaskForm">
      <cfinput type="hidden" name="taskId" value="#taskId#">
      
      <label for="taskCount">Count: </label>
      <cfinput type="text" name="taskCount" validate="integer"><br/>
      
      <cfinput type="submit" name="saveTask" value="Save Task" onclick="submitForm();return false;">
</cfform>

The ajax submission code for this form looks like this.

submitForm = function(){
      ColdFusion.navigate('updateTask.cfm','resultOP', {callback handler}, {error handler}, 'POST', 'TaskForm');
}

As you can see if we did not use ajax to submit the form the count input field would require an integer value. So lets modify this example to reconnect the validation scripts.

Example: With Validation Working

The first thing we need to do is get a reference to the form. You can do this a couple of different ways but the easiest way is to just pass the reference as a variable in the submitForm call. To do this add "this.form" to the submit form button javascript call.

<cfinput type="submit" name="saveTask" value="Save Task" onclick="submitForm(this.form);">

With the reference passed we can now execute the validation scripts. The way CF generates validation scripts for forms is by creating a validation function for each cfform. The name of this script follows this convention.

_CF_checkFORMNAME(formreference);

So for the above form named "TaskForm" the script name becomes.

_CF_checkTaskForm(formreference);

To put this together we modify the submit form function as follows.

submitForm = function(formreference){
      //run the validation rules and get back a true/false value based on success
      var check = _CF_checkTaskForm(formreference);

      if (!check) {
            //if the rules failed then do not submit the form
            return false;
      } else {
            //If checks pass then submit the form via ajax
            ColdFusion.navigate('updateTask.cfm','resultOP', {callback handler}, {error handler}, 'POST', 'TaskForm');
      }
}

What Do You Think?

Reader Comments

Ryan Anklam's Gravatar
Ryan Anklam
Tuesday, July 17, 2012 at 8:54:46 AM EDT

Just a quick point about returning false from an event handler. When returning false you are effectively doing the same thing as calling both the event.preventDefault() and event.stopPropigation() methods on the event. This may or may not be what your intentions are. If you had another event listener that does something on form submit returning false will prevent that from happening so calling event.preventDefault.

The event in this case will be global property called event.

Steven Neiland's Gravatar
Steven Neiland
Tuesday, July 17, 2012 at 9:32:52 AM EDT

Thanks ryan. In my limited usage this is not an issue for me but you are right. In the scenario you mention this would be a problem. Ill update this example asap.

Steven Neiland's Gravatar
Steven Neiland
Tuesday, July 17, 2012 at 11:28:27 AM EDT

Ryan, I think the scenario you mentioned is JQuery specific.

My example does not use JQuery for ajax so "return false" is probably the correct solution in this scenario.

Ryan Anklam's Gravatar
Ryan Anklam
Tuesday, July 17, 2012 at 1:35:57 PM EDT

Steven, you were right, I guess my memory of life before jQuery serves me poorly. Here is a jsFiddle I put together to demonstrate all the behaviors w/o a JavaScript framework.

http://jsfiddle.net/ys5zm/3/

Steven Neiland's Gravatar
Steven Neiland
Tuesday, July 17, 2012 at 1:42:57 PM EDT

I know. I often get caught by this myself.

Im actually trying to relearn js myself without the help of frameworks. (I remember now why I disliked js before JQuery).

Thanks for the link.

Note to self: I really need to setup trusted users for comments.

Post a Comment

Comment Etiquette:

  • Please keep comments on-topic.
  • Please do not post unrelated questions or large chunks of code.
  • Please do not engage in flaming/abusive behaviour.
  • Comments that contain or appear to be advertisments, will not be published.
  • Comments that appear to be created for the purpose of linkbuilding to commercial sites will be removed.

We are all adults here so play nice.

*
*



Archives Blog Listing

Tag Listing

Learn CF In A Week

Treehouse

 
Fork me on GitHub