TheNitai

As a developer of web applications you (should) know that your users will not always enter the data you expect in a form field. When you post the form with a normal submit, then the browser will take care of the encoding for you, but what about AJAX calls? Say, you need to grab a form value and need to pass it on in a AJAX call, then you need to take care of the encoding.

Javascript gives you 3 functions to encode your values. These are escape(), escapeURI() and encodeURIComponent(). Now, probably like a lot of others, I have only known about the escape() function and used to use that function to encode my URL values. Until the other day, when I had to preserve a “+” and a “/” in a value. Apparently, there is a fundamental difference between them.

escape:

In all browsers that support JavaScript, you can use the escape function. This function works as follows: digits, Latin letters and the characters + – * / . _ @ remain unchanged; all other characters in the original string are replaced by escape-sequences %XX, where XX is the ASCII code of the original character.

escapeURI & encodeURIComponent

In addition to escape, modern browsers support two more functions for URL-encoding: encodeURI and encodeURIComponent. These functions are similar to escape, except that they leave intact some characters that escape encodes (e.g. apostrophe, tilde, parentheses); moreover, encodeURIComponent encodes some characters (+ / @) that escape leaves intact. Unlike escape, that produces %uXXXX, encodeURI and encodeURIComponent will encode the capital Cyrillic letter A as %D0%90, and the euro sign (€) as %E2%82%AC.

I have to say that I love the Adobe Spry Javascript framework. It is easy to use and simply just works. For most situations it comes with “widgets” for just about everything you need in your Ajax enabled web application.

One of my favorite widgets is the Text Validation one. With it you are able to validate just about everything the user enters and you will have full control of the input, even the pattern of the input.

But what about if you need a custom validation? According to the documentation you can use the “custom” parameter with a “pattern”. But if you use it, you actually apply a “pattern”, meaning applying a pattern of “pattern: “bbb” only allows the user to enter 3 alphabetical characters, but nothing more. Usually you want to have the user enter only alphabetical characters and not limiting the amount of chars.

In order to achieve this, you have the undocumented parameter called “characterMasking”! “characterMasking” combined with “usecharacterMasking: true” allows you to pass Regular Expressions to the text field you want to validate within the Spry syntax. Powerful stuff. It is beyond me, why Adobe has not updated their documentation on this. In any case, here is a example:

Say you want to allow only alphabetical character in lowercase and nothing else, you would use a syntax of;

var custom = new Spry.Widget.ValidationTextField(“myfield”,”custom”, {isRequired:true, hint:’some hint’, characterMasking: /[a-z]/, useCharacterMasking:true, validateOn:["blur", "change"]});

Would you like to only enable digits and spaces?

var sd = new Spry.Widget.ValidationTextField(“subdomain”,”custom”, {isRequired:true, hint:’Desired Subdomain’, characterMasking: /[\d\s]/, useCharacterMasking:true, validateOn:["blur", "change"]});

I guess you get the point. Combined with Regular Expression the Spry Text Validation Widget just entered into a new level of productivity.