Before CFFORM and CFINPUT validation made it easy to validate form inputs with such CFINPUT attributes as required="true" and message="email is required" developers wrote thier own custom javascript validation and believe it or not most web developers still do. The reson for this is because Coldfusions CFFORM validation still cant do everything you need it to, however there are some powerful CFINPUT validations I find extremely useful in form development.

One I find extremely useful is the CFINPUT attribute "validate", which can be used to validate many types of user input such as an email, credit card number, date, ect.

So what do you do when you have a HTML form that validates user input with custom javascript called from an onSubmit call in the form tag but want to use Coldfusions CFINPUT validation. Chances are you tried changing the FORM to CFFORM and found your custom javascript stopped working and hastily decided CFFORM broke your javascript.


Example HTML open form tag with onSubmit method:

view plain print about
1<form name="myForm" action="#cgi.script_name#?action=submit" method="post" onSubmit="validateForm(this)">

This it not the case though, Coldfusions CFFORM tag simply replaced your onSubmit method with its own on submit method, and you can see this by viewing the page source.

CFFORM's replaced on submit method.

view plain print about
1<form name="myForm" action="#cgi.script_name#?action=submit" method="post" onSubmit="return _CF_checkmyForm(this)">

 

The call Coldfusion replaced your onsubmit method with is the javascript that performs your CFINPUT validation.

Since your onSubmit method is overwritten (and there is nothing you can do about it) you need to find a way to first call your javascript and then call CFFORMS. The answer is to get rid of your submit button and replace it with a regular button with an onClick call that calls your function.

Change:
view plain print about
1<input type="submit" value="submit" name="submit">

To:
view plain print about
1<input type="button" value="submit" name="submit" onClick="validateForm(document.myForm)">

Then at the end of your javascript function add in a call to Coldfusions CFFORM validation function, and if it passes all submit the form.

Example:
view plain print about
1<script>
2
3function validateForm(theForm){
4
5//Your validation code here then CF's
6
7doCFvalidate = _CF_checkmyForm(theForm); // this runs the CFForm validation and returns a boolean value
8
9    if(doCFvalidate) { // passed the CFForm validation, so submit
10        theForm.submit();
11    } else { // failed cfform validation
12        return false;
13    }
14
15}
16
17</script>

Its that simple, I wish I had only discovered this years ago. Now you can mix your legacy or advanced javascript functions and Coldfusions CFFORM validation without a huge headache and hours of wasted time.

 

 

This entry was posted on May 28, 2009 at 9:41 AM and has received 3028 views. There are currently 2 comments. Print this entry.