Yet another input mask tweak: allow only Latin-1 letters and punctuation — but not numbers — with no fixed length!
A Marketo user needed something that’s not covered in my old input mask tweaks post nor the more tweaks follow-up (both recommended!).
To comply with internal requirements, one field may only have Latin-1 characters except digits 0
to 9
— blocking everything beyond the first 255 Unicode codepoints — while not requiring a specific length.
Both requirements are tricky and not built-in.
The first, allowing Latin-1 except for standard (Arabic) digits, requires a custom mask character. Built-in mask a
only allows ASCII a
to z
and A
to Z
. (I’ve warned before about assuming it allows “letters,” which isn’t so!) And built-in 9
only allows digits 0
to 9
, which is the opposite direction.
To allow basic English and Romance-language letterforms plus punctuation and whitespace, but not ASCII digits or anything else, you definitely need to go custom.
The second requirement also spells customization. We need our mask to allow no character at all at a position. That is, if the first 20 characters/positions are I love your software
, the remaining 235 positions (of a 255-pos’n mask for a 255-char String field) can be empty. In contrast, built-ins a
, 9
, and *
all require a character at every position in the mask. That’s good for forcing 5-digit zip codes, for example. But not for this.
Step 1: Make sure masks are enabled
As noted in earlier posts, make sure the field has an input mask set in Form Editor. (The mask pattern doesn’t matter: could be just a single a
. But Marketo won’t load the input mask module without at least one masked field, and we need the module in order to customize its behavior!)
Step 2: Add the custom mask character
Extending Forms 2.0’s input mask plugin is simple. (Okay, I spent a bunch of time reverse-engineering back in the day, so.)
We’ll add D
, which uses a negative character class [^]
to ban digits, all Unicode characters above U+FF, and (because it’s a good idea) control characters too:
MktoForms2.whenReady(function (readyForm) {
MktoForms2.$("body").on("mkto_inputmask_polyfilled", function (e) {
MktoForms2.$.mask.definitions["D"] = /^[^0-9\p{Cc}\u{100}-\u{10FFFF}]*$/u;
});
});
Step 3: Set the mask for your field(s)
Now that D
is recognized, we can use it together with the equally important placeholder
and autoclear
options:
MktoForms2.whenReady(function (readyForm) {
MktoForms2.$("body").on("mkto_inputmask_polyfilled", function (e) {
MktoForms2.$("[name='NumberFreePersonNotes']").mask("D".repeat(255), {
placeholder: "",
autoclear: false
});
});
});
For simplicity, I used String#repeat instead of typing DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD
. Smooth, eh?