Okay first off we need an Application.cfm file in the directory that will hold the form.cfm and the action_form.cfm files. This application file is important as we are going to create a session to hold our form values while we do our validation. We need to hold these values in the event that our validation fails and we have to show the user the form again to correct their errors. We don't want our user to have to re-fill in values they have already filled in so hence the use of the session. 

Note page division are separated by the ====== line!

<!-- Our Application.cfm file can be as simple as this -->
<cfapplication name="myForms"
                     sessionmanagement=
"Yes" 
                     setclientcookies=
"No"
                     sessiontimeout=
"#CreateTimeSpan(0,20,0,0)#">
===========================================================
<!-- This is our form code that goes in  form.cfm page -->

<!-- Note the action in our form tag is passing the form values to our action_form.cfm page -->
<form name="info" method="post" action="action_form.cfm">
<table width="100%" border="0" align="center" cellpadding="0">
    <tr valign=
"middle">
        <td colspan=
"2"><center><h3>We would like to hear from you.</h3></center></td>
    </tr>
    <tr>

        <!-- Note I have deliberately placed a checkbox in here as validating checkboxes can be a pain -->
        <td align="right" valign="center">Sign me up to Your Mailing List: </td>
        <td align=
"left" valign="center"><input type="checkbox" name="signup" value="yes"></td>
    </tr>
    <tr>
   
     <td align="right" valign="center"> Name : </td>
        <td align=
"left" valign="center"><input name="name" type="text"></td>
    </tr>
    <tr>
        <td align=
"right" valign="center"> E-mail : </td>
        <td align=
"left" valign="center"><input name="email" type="text"></td>
    </tr>
    <tr>
        <td align=
"right" valign="top"> Comments : </td>
        <td align=
"left" valign="center"><textarea cols="40" rows="2" name="comments"></textarea></td>
    </tr>
    <tr valign=
"middle">
        <td colspan="2" align="center"><br><input name="Submit" type="submit" value="Submit"></td>
    </tr>
</table>

</form>
<!-- =========================================================== -->
<!-- This is our action_form.cfm Page -->


<!--- Must create this default structure or we pull an error --->
<cfparam name="session.contact_nfo" default="">
<cfif NOT IsStruct
(session.contact_nfo)>
           
<cfset session.contact_nfo = StructNew
()>
</cfif>


<!-- Now we create default variable using cfparam -->
<cfparam name="Form.terms" default="NO">
<cfparam name=
"session.contact_nfo.Name" default="">
<cfparam name=
"session.contact_nfo.email" default="">
<cfparam name=
"session.contact_nfo.comments" default="">

<!-- Now we clear the Session of any Values to allow us to place our new form Values passed from our form page -->
<cfset StructClear(session.contact_nfo)>
<!-- Now we are placing our Form Values into the Session -->
<cfset session.contact_nfo.terms= form.terms>
<cfset session.contact_nfo.Name= form.Name>
<cfset session.contact_nfo.email= form.email>
<cfset session.contact_nfo.comments= form.comments>

<!-- Now we are going to do our Error Checking first off by creating a value of nothing for the variable we are calling Errors -->
<cfparam name="errors" type="string" default="">
<!-- As we check for Errors if we find one we place it in our List to display to our user making it easy for the end-user to correct as they can see the error -->
<!-- Notice we are not validating the checkbox as it is not a required form field -->

<cfif form.Name EQ "">
           
<cfset errors = errors &
"<li>You Forgot to enter your name!</li>">
</cfif>

<!-- Checking the email is a little more complicated so we use a regular expression to check and see if there is a email address and also is it formed properly -->
<cfif NOT REFindnocase("^[-_!a-z0-9\.]+@([-_a-z0-9]+\.)+[a-z]{2,6}$", email)>
           
<cfset errors = errors &
"<li class=""errors"">Your Email Address seems incorrect?</li>">
</cfif>

<cfif form.comments EQ "">
           
<cfset errors = errors &
"<li class=""errors"">You Forgot to enter a comment!</li>">
</cfif>

 <!--  If any errors were detected in the previous section we now show the form again placing our error messages in a list to show the users the errors they need to correct Now this is where we use the session we created, we don't want our user to have to re-enter good data again so we show him the form with the  original data he entered in it saving him typing time. This will make perfect sense on a long form where quite possibly you could lose a potential customer if they get annoyed at having to re-fill in information again -->

<cfif errors NEQ "">
    <!-- Here we are collecting the Error Message generated by our code and placing them into a list for the user to see -->
    <table width="100%" border="0" align="center" cellpadding="0">
        <tr> 
            <td>
You have some errors in your form submission! Please try again!<br>
                    <ol>
                        <cfoutput>#errors#</cfoutput>
   
                 </ol></td>
   
     </tr>
    </table>

    <!-- Notice that this is basically the same form we used in form.cfm we some very important changes one of which is the whole form is wrapped in a cfoutput tag which is needed as we are going to be outputting our session values into the form, showing the user what he originally placed in the original form.cfm template. Also take note that the form action is now different in that it is carrying the applications session with it which we need to make our Application.cfm file work with the action. -->
    <cfoutput>
    <form method="post" action="action_form.cfm?#session.UrlToken#">
   
<table width="100%" border="0" align="center" cellpadding="0">
        <tr valign=
"middle">
            <td colspan="2">
<center><h3>We would like to hear from you.</h3></center></td>
        </tr>
        <tr>
            <td align=
"right" valign="center">Sign me up to Your Mailing List: </td>
            <td align=
"left" valign="center">
            <!-- Because we didn't need to do error checking for our checkbox we have to approach it a little different than the other fields in our form in order to reflect any previous values -->
                <cfif session.trip_nfo.signup eq "yes"><input name="signup" type="checkbox" value="yes" checked="checked">
                <cfelse><input name="signup" type="checkbox" value="yes">
                </cfif></td>
        </tr>
        <tr>
            <td align=
"right" valign="center"> Name : </td>
            <td align=
"left" valign="center">
            <!-- This is how we place our session values into the form field also important to note the because we used cfparam in the start of this page to assign a default value of "" if there was no value originally entered in the form than it will show no value here. If we did not use the cfparam tag we would now show an error as the session would go looking for a non-existant value -->
             <input type="text" name="Name" value="#session.contact_nfo.Name#"></td>
   
     </tr>
        <tr>
            <td align=
"right" valign="center"> E-mail : </td>
            <td align=
"left" valign="center"><input type="text" name="email" value="#session.contact_nfo.email#"></td>
        </tr>
        <tr>
            <td align=
"right" valign="top"> Comments : </td>
            <td align=
"left" valign="center"><textarea cols="40" rows="2" name="comments">#session.contact_nfo.comments#</textarea></td>
        </tr>
        <tr valign=
"middle">
            <td colspan="2" align="center"><br><input name="Submit" type="submit" value="Submit"></td>
        </tr>
    </table>

    </form>
</cfoutput>
<!-- If no errors were detected we abort the previous code and show the next code section -->
<cfabort>
</cfif>

<!-- In this next section we can now take our form values and do what ever we decide to do with them i.e. mailing them to ourselves, placing them into a database, or a combination of both. In this section it is wise to let the user know that his information has been received as coldfusion has no way of letting them know -->

 

About This Tutorial
Author: Redmanz
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF5
Total Views: 146,886
Submission Date: November 26, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 1
Discuss This Tutorial
  • Just a fix for the array method. The way that you have the code set out now means that if the last field in the array has no error, then it ignores any previous fields that may have errors. To prvent this from happening, add one more CFIF statement in there like this:

  • How do you create a drop down that will populate Date of Birth in the database.

  • then your query.... to display the messages..

  • #errors[i]#
  • if there is a way to improve that code let me know

  • Coder, I've read the docs and I'm not following what you are suggesting... can you post something supporting your statement?

  • Hello, If you used a table to hold your field names and created the forms dynamicly using arrays, you could load the session variables using arrays as well which would lessen the amount of your code by 75%. Even if you aren't using a database, ColdFusion already includes built in functions for doing this it takes a lot less code. All you have to do is read the docs.

  • how about to check name that matches valid entry: only A-Z @ . ' Adam Jr. @ Junior - valid adam9- invalid a_dam - invalid anyone know the regular expression..

  • Another thing that I do, Is dump the session vars into a local scope, so you can lock the session vars up at the top in one place, and use the local scope vairables to use in the error message and form values, otherwise you need to lock the entire form, which is a bad way to use a lock.

  • aaa

  • instead of setting 'errors' as a string with html, simply do a listappend so the errors will be in a list format That way the page displaying the errors can have better control of the look of the error message output.

  • dddd

  • Advertisement

    Sponsored By...
    Deep Tissue Massage and Swedish Massage Services just $39 for a 50 minute massage!