This is an expansion on Isaac's entry, Mixing CFForm and custom javascript validation. In his blog entry, he tells us how to manipulate Coldfusion's built-in JavaScript validation in CFFORM to include your own custom validation.

I immediately wanted to try it out, because having CFFORM override my custom validation was a major blow to my enthusiasm in using this CFFORM feature. Basically, what he does is switch out a submit button for a regular button and added an onclick to the new button. The problem here is what happens when JavaScript is turned off - the form won't submit!

Here is a little snippet of code that I developed to take care of instances where the client has JS turned off:

view plain print about
1<input type="button" value="submit" name="submit" class="js_submit" onClick="validateForm(document.myForm)">
2<noscript>
3    <input type="submit" value="submit" name="submit">
4    <style type="text/css">
5        .js_submit {display:none;}
6    </style>
7</noscript>

Basically, I took Isaac's new submit button and added a class to it. Then, I added a noscript block with a regular submit button (to submit the action in the CFFORM tag). Then, I added some CSS to not display the button utilizing onclick. One thing I feel I should point out here is that we should ALWAYS duplicate the validation server-side, for when the client has JS turned off.

Very simple bit of code and now the form is usable by everyone. (One minor issue that I noticed is that if the user also has CSS turned off then they will see both buttons - but only 1 of them work).

'Til next time, Bridget

This entry was posted on August 12, 2009 at 12:45 PM and has received 784 views. There are currently 0 comments. Print this entry.