Does anyone use Flash forms?

I’m building a website for my wife’s business, and it’s going to involve a lot of forms. There will be forms for contact us, scheduling a class, online disclaimer form, etc.

It’s a CF site, so my form choices are:

  1. Standard HTML form
  2. <cfform>
  3. <cfform format=“flash”>

The problem with option 1 is validating input. I’m no good at javascript, so I’d have to do all the verification after the form is submitted. I’ll probably do that anyway (in case someone has js disabled, or noscript installed in FF), but I’d like the client-side backup.

Option 2 is nice for the aforementioned validation option.

Option 3 is nice for things like date fields. You can use flash forms to give you a cool calendar popup so you can pick a date (like a class date).

I know most people default to option 1, but I was interested in any drawbacks people have had from picking options 2 or 3.

Flash forms are being removed from ColdFusion as of version 10, so I wouldn’t :). The recommended approach by Adobe nowadays is to use tools like Flex instead.

In terms of Javascript / Server-side validation then definately have a look at a framework called ValidateThis. We’re using it in our projects and the time it saves us is great.

Basically you define a set of validation rules to run against your object / form properties i.e.

“This formfield is required”
“This formfield has to be numeric”
etc.

… and the framework pretty much does the rest for you and give you the results. If you tell it you want it to produce things like client-side it’ll generate all the Javascript ( specifically jQuery ) on the fly.

Great stuff!!!

You can find more about it here :- ValidateThis - A Validation Framework for ColdFusion Objects

Cheers,
James

Ah, good info, and rules out option 3.

I’ll definitely have a look at ValidateThis. Thanks!

My advice would be not to use the the validation built into CFFORMS. I’ve used it in the past and found it not to be as flexible as I needed, especially when validation is conditional.

If you are going to do validation on the client side, a better option would be to use jquery.

You should perform validation on the server side. It’s very easy for hackers/spammers to bypass client side validation.

Most often I skip the client side validation and just use server side validation and then return a message detailing what needs to be entered.

I do use CFFORM and the cf form fields because there is less coding involved in populating the fields and I use the preserve data option in the form so that when I have to send the user back to the form when it doesn’t pass the validation, the information they entered is displayed and I don’t have to write code to populate the fields.

Here is a sample of how I set things up:

<cfparam name="strValidation" default="">


<cfif isDefined("form.addRecord")>


  <!---Cancelled--->
  <cfif form.submit EQ "Cancel">
    	<cflocation url="default.cfm">
  </cfif>
  <!---Validate--->
  <cfif len(trim(form.txtWarehouseName)) EQ 0>
    	<cfset strValidation = strValidation & "<li>Warehouse Name</li>">
  </cfif>
  <cfif len(trim(form.txtWarehousePhone)) EQ 0>
    	<cfset strValidation = strValidation & "<li>Phone</li>">
  </cfif>
  <cfif len(trim(form.txtWarehouseEmail)) EQ 0>
    	<cfset strValidation = strValidation & "<li>Email Address</li>">
  <cfelse>
      <cfobject name="cfcFunctions" component="cfc.functions">
	  <cfif cfcFunctions.IsEmail(form.txtWarehouseEmail) EQ 0>
        <cfset strValidation = strValidation & "<li>Email Address - Not Valid</li>">
      </cfif>

  </cfif>

  <cfif len(trim(strValidation)) EQ 0>
  
  	<cfset blnUpdated = application.Warehouse.updateWarehouse(
		txtWarehouseName=#form.txtWarehouseName#,		
		txtWarehousePhone=#form.txtWarehousePhone#,
		txtWarehouseFax=#form.txtWarehouseFax#,
		txtWarehouseEmail=#form.txtWarehouseEmail#
		intWarehouseID=#id#
    )>
    
    <cflocation url="updateWarehouseinfo.cfm?id=#id#&blnUpdated=1">
    
    </cfif>
    
</cfif>

AND here is the form:

            <cfform action="" method="post" name="addWarehouse" preservedata="true" id="addWarehouse">
			<cfif len(trim(strValidation)) NEQ 0>
                <div class="validationerror ui-corner-all">
                <h3>The following information is required.</h3>
                <ul>
                <cfoutput>#strValidation#</cfoutput>
                </ul>
                </div>
            </cfif>        
            <cfif isdefined("url.blnUpdated") AND url.blnUpdated EQ 1>
                <div class="confirm ui-corner-all">
                Record Updated
                </div>
            </cfif>           
        
         <table width="700" border="0" align="center" cellpadding="2" cellspacing="0">
          <tr>
            <td colspan="2" ><h3>General Information</h3></td>
           </tr>
          <tr>
            <td width="100" ><label>Name:</label></td>
            <td width="600" ><cfinput type="text" name="txtWarehouseName" class="textfield250" id="txtWarehouseName" value="#rsWarehouse.txtWarehouseName#">
              *</td>
          </tr>
          <tr>
            <td width="100" ><label>Phone:</label></td>
            <td width="600" ><cfinput type="text" name="txtWarehousePhone" class="textfield100" id="txtWarehousePhone" value="#rsWarehouse.txtWarehousePhone#">
              *</td>
          </tr>
          <tr>
            <td width="100" ><label>Fax:</label></td>
            <td width="600" ><cfinput type="text" name="txtWarehouseFax" class="textfield100" id="txtWarehouseFax" value="#rsWarehouse.txtWarehouseFax#"></td>
          </tr>
          <tr>
            <td width="100" ><label>Email:</label></td>
            <td width="600" ><cfinput type="text" name="txtWarehouseEmail" class="textfield250" id="txtWarehouseEmail" value="#rsWarehouse.txtWarehouseEmail#">
              *</td>
          </tr>
          
          <tr >
            <td colspan="2" >&nbsp;</td>
          </tr>
  
          <tr>
            <td width="100" >&nbsp;</td>
            <td width="600">&nbsp;</td>
          </tr>
          <tr>
            <td width="100" ><cfinput type="hidden" name="addRecord" id="addRecord" value="1"></td>
            <td width="600"><cfinput type="submit" name="Submit" value="Update" class="fg-button ui-state-default ui-corner-all">
              <cfoutput>
                <cfinput name="Cancel" type="button" id="Cancel" value="Cancel" class="fg-button ui-state-default ui-corner-all">
              </cfoutput></td>
          </tr>
        </table>
         <p>&nbsp;</p>
        </cfform>

The form and code may not match up as I’ve cut the example down.

Nice. Like I said above, I use server side validation too, but client side is nicer for users. Plus, I don’t know a thing about javascript or jquery (I have the sitepoint jquery book, and that’ll get read at the cottage this summer) so the cfform validation is attractive.

I always first build the form with enough server side validation to be impermeable to malicious/incorrectly entered information, then add the client side in to streamline the data entry process. I usually end up adding in cfform and/or other validation methods as needed as the last step. I ran into some issues forcing the selection of combo boxes with the build in validation and had to work on that a little, but also that was a long time ago :slight_smile: