I’ve had this problem for months and so far have discovered no acceptable solution.

Take for example the following code:

<cfform>
Phone <cfinput maxlength="12" size="15" mask="999-999-9999" required="yes" name="phone" type="text">
</cfinput>
</cfform>

This code generates the following:

Then to demonstrate the issue, I will convert it into a Flex form

<cfform format="flash">
<cfinput maxlength="12" size="15" mask="999-999-9999" required="yes" name="phone" type="text" label="Phone">
</cfinput>
</cfform>

Which generates this:

Neither form has been submitted, but the first form will report an error if it’s submitted empty or mal-formed The second code will show an error immediately as if it’s been submitted already. The problem seems to be a combination of using the mask (999-999-9999 to indicate any numerical digit separated by a dash) and the “required” attribute while using the flash form. If I remove the mask attribute, it doesn’t report an error until after it’s been submitted – but this loses the client-side auto-formatting feature. If I remove the “required” attribute, the mask works but I lose the uniform look beside the rest of the form I’d potentially be placing alongside as “required” fields. And if I remove the format=”flash” part of the cfform, the issue clears right up but provides no visual clue that the field is required until after it has been submitted.

I submitted this to Adobe as a bug and have not yet received a response, and I’ve confirmed this issue to be present in the beta version of yet-to-be-released Adobe Centaur (codename for CF9).