I've mentioned input masking before, and Tim Buntel demoed the use of masking in his Flash based election form at MAX. But we haven't spent a lot of time talking about the specifics of this feature, and having used it extensively the past few days I just have to spill the beans.
Here's the big idea. Almost all form field validation in Web applications occurs once the form has been filled in. Then, either using client-side or server-side validation (or a combination thereof), any errors are caught and displayed, and users make their corrections. So, if a field requires a numeric value, and a user enters alphabetical characters, that would throw an error requiring the user to make a correction. Which begs the question, if certain characters are not allowed, or if a specific input format is required, why not simply prevent the user from entering bad data in the first place? If a form field required digits, why not simply prevent the user from entering anything else? If phone numbers were wanted in a specific format, why not enforce that format at data input time? Simple, right? Well, not really. While the concept is indeed simple (and is the norm for forms in desktop applications), the code required to implement this type of data validation is not trivial.
Until Blackstone, that is. Blackstone introduces a new attribute to , mask takes a input mask that is used as a data input filter. A mask is a string made up of special characters which are used to validate data entry. ? allows any character, A allows only alphabetical characters, 9 allows digits, X allows alphanumeric characters, and any other character is embedded itself.
For example, to accept a 3 digit age you could do the following:
<cfinput type="text"
name="age"
maxlength="3"
mask="999">
Only digits will be accepted by the 9 filter, and so only digits will be allowed. If a user entered anything other than a digit that input would simply be ignored.
Similarly, to accept a U.S. style phone number, in the format (123)456-7890 you could use the following code:
<cfinput type="text"
name="phone"
maxlength="13"
mask="(999)999-9999">
The 9's allow only digits, and the other characters are inserted automatically.
For a Canadian postal code you could use:
<cfinput type="text"
name="postcode"
maxlength="7"
mask="A9A 9A9">
You get the idea. Input masking does not negate the need for input validation, but it does make for a far better user experience.
Oh, and input masking in Blackstone is planned for both HTML and Flash forms.
The biggest problem that I have with any form of client side validation is the plain fact that it depends on Javascript to do this. What if the person simply turns Javascript off? In that case none of your validation works.
Personally I would love it if Blackstone included a CFC or something that would make server side validation easier. Right now I have a library of custom tags to do this for me. If I want to validate a date input field, I simply call the custom tag and it validates and returns an error to me if it doesn't meet the validation.
Just my 2 cents worth.
Are you saying the browser will ignore the invalid input and simply not enter it into the text field?
Dan
If so, then what range of browsers is in the test suite? Will Linux browsers be listed out too, whether successful or unsuccessful? Will the scripts be open and editable so that people could vary our routines as they desire?
tx,
jd
For Flash forms it embed AS in the generated SWF, and I don't think you can change that code at all. But as it runs within the Flash player there should not be platform distinctions at all.
For HTML forms it embeds calls to already written JavaScript functions which are included in the page using a <script> tag. I do not know which browsers and platforms have been tested, the few that I use all seem to work. And yes, the .js file which actually contains the masking code sits on the server and can indeed be edited (in much the same way as JavaScript based form field validation works in CF currently).
Example: Creating a new password I require users to have 8-32 characters starting with a letter and containing at least 1 number and 1 special character.
What am thinking of is that it might be possible for somebody somewhere to implement a crude regex support in a custom AS file. But that would only be of benefit if blackstone flash objects (charts, forms, and documents) can load or link such files.
For example: in the query results I have a SSN 999999999 and I want to output it as 999-99-9999
I only have read access to the database so modifing the data by inserting the dashes is not possible.
Same would apply to european phones, canadian zip codes...etc - so the function would have to work with alphanumerics and be very flexible allowing you to use any characters in the mask.
I am thinking something like #MaskFormat(variable, [XXX-XX-XXXX])# should be very usefull.
It is of course possible that something along these lines already exists...I just could not find it, so please let me know.