Archive for the 'JavaScript' Category

Coldfusion and WDDX for Dynamic Form Validation

Every so often, I need to validate a form field from a list that is stored in a database.  Using Coldfusion’s support for WDDX (Web Distributed Data eXchange) works well for this solution.  In my most recent example, I needed to validate a state field, however, the business owners did not want a drop down (the easy way to validate something like this).  Staff using the application wanted to key the data.  Additionally, rules surrounding what is a valid “state” change and can include or exclude various U.S. territories like Guam or the Virgin Islands.  For this reason, I needed to lookup a list of valid states and then loop over those results, comparing to what the staff person keyed into the form.  So lets see how this is done:

The first step is to load the needed libraries for wddx support like so:

<script type=”text/javascript” src=”/CFIDE/scripts/wddx.js”></script>

Next we look up the list of states we want.  This assumes you have a database with at least one column called “code” that holds the two digit abbreviation for states.  Here’s my query:

<cfquery name=”qStatesWorked” datasource=”#systemdsn#”>
select CODE
from state_codes
where state_flag = ‘Y’
and valid_flag = ‘Y’
or code = ‘PR’
or code = ‘VI’
order by code
</cfquery>

In this case, I have a couple of columns that determine if the entry is valid, and if it is an actual state (some are territories).

Now we will load our JavaScript object with the results of our database query:

<script>
<cfwddx action=”cfml2js” input=”#qStatesWorked#” topLevelVariable=”gState”>
</script>

Now, you will need a JavaScript function to loop over the object that contains your query results:

function MatchState(stateCode) {
var rValue = false;
var nRows = gState.getRowCount();
//check that any value in Union Number matches available options from database
// by looping through the union query results
for (x=0; x<nRows; x++)
{
if (stateCode == gState.getField(x,’code’)) {
rValue = true;
}
}
return rValue;
}

This is pretty straight forward, find the number of records in your object with .getRowCount(), loop the object that number of times, performing a value comparison and setting your return value to true if there is a match.

Finally, I need to call out function as part of my master form validation script (of which MatchState() is a part of).  I have a series of “if/else if” checks using the following to check for a valid state code:

else if (!MatchState(form.MAIL_STATE.value)){
alert (“State is incorrect.”);
form.MAIL_STATE.focus();
rvalue = false;
}

If I MatchState returns FALSE, a JavaScript alert is fired, focus is set to the state text box and we set the return value to false.  The form submission is halted and the user knows they have keyed a bad state value.

Try not to get stuck on validating a list of state codes, I know most folks will just lock it down with a static drop down list, but this could be used for any number of things where you need to validate against a list of valid options and you need to allow data to be keyed rather than selected.  I was happy Coldfusion could easily facilitate the use of WDDX as this made the entire process pretty painless.