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
For example, to accept a 3 digit age you could do the following:
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:
The 9’s allow only digits, and the other characters are inserted automatically.
For a Canadian postal code you could use:
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.
Blackstone Input Masking
16 responses to “Blackstone Input Masking”
-
I have to admit that this sounds like a great addition to Blackstone, this doesn’t sound like anything that the CFINPUT doesn’t do now.
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. -
Tony, actually, Blackstone does make server-side validation easier. I’ll discuss this in a future post.
-
Ben,
Are you saying the browser will ignore the invalid input and simply not enter it into the text field?
Dan -
Dan, yes, that is exactly what I am saying.
-
Cool, I think… I’m understanding the one-sentence summary as "Blackstone on the server generates JavaScript (or ActionScript) which prevents unwanted keystrokes on the client, by specifying the number of permitted characters and whether each character is a numeral or a letter"… did I get the correct takeaway?
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 -
JD, correct.
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). -
Hi Ben, can the input mask be used like a regular expression?
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. -
Randy, I wish. But nope, not in this release. Maybe in a future update.
-
So how would mask validate currency?
-
Devin, not easily. Masking does not work well when there isn’t a fixed pattern. To support 123 and 123.45 and 1.23 and 12345.67 you’d probably need a regular expression. I think.
-
and regular expressions are supported in flash, correct?
-
Devin, no, the Flash player does not have RegEx support yet. Until the player gets built-in RegEx support, any Flash implementations would need to be script based and embedded in the SWFs (which would have size and performance implications).
-
Will blackstone’s flash forms allow the linking of custom validation AS files?
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. -
Adedeji, no, that won’t be doable. You can use AS expressions in events and things, but not much more than that.
-
How about a function to fill in numbers? say you need to mask a six digit and then two decimal places. Formatting is easy… but if I type in 25.44 I get 254,400.00 and that just doesn’t work. Any tips?
-
I was wondering, we have input masking… but do we have output masking? I have been searching and I can not find anything of the kind in CF7
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.
Leave a Reply