Ask a Jedi: Validating Numbers in a Flash Form Grid

A reader asks:

If you have an updatable grid, how do you validate a field numeric before it is submitted?

This is one of those things that is pretty simple if you know ActionScript well. I don’t, but have friends who do. Here is a simple example of it in action, and it can definitely be done better:

<cfset data = queryNew("id,name,age")>

<cfloop index=”x” from=”1” to=”10”> <cfset queryAddRow(data)> <cfset querySetCell(data,”id”,x)> <cfset querySetCell(data,”name”,”User #x#”)> <cfset querySetCell(data,”age”,randRange(20,90))> </cfloop>

<cfform format=”flash” name=”test” onSubmit=”return checkNumbers()”> <cfformitem type=”script”> function checkNumbers() { for(var i=0; i < people.dataProvider.length; i++) { var theValue = people.dataProvider[i].age; if(isNaN(theValue)) { outputarea.text = theValue + “ is not a number.”; return false; } } return true;

}
&lt;/cfformitem&gt;

&lt;cfgrid name="people" query="data" selectMode="edit" /&gt;
&lt;cfformitem type="text" id="outputarea" /&gt;
&lt;cfinput type="submit" name="submit" value="Submit" /&gt; &lt;/cfform&gt; </code>

The beginning of the code simply creates a fake query for us to use. That query is passed to the cfgrid tag. Notice that I have turned on editing with selectMode=”edit”. To validate, I decided to use onSubmit. It may be possible to validate on change, but I had trouble getting it to work right. We use the new cfformitem type=”script” to write a function that will check the values of our grid. I loop over every row in the grids dataProvider (just consider this the query behind the grid), and check the age column. (Technically I should check the ID as well.) I’m using isNaN which is short for “Is Not A Number” to check each value. If the value is bad, I write out an error and abort the form submission. You could even make this more intelligent and verify age is over 0, and below some sensible number like 130.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Comments