08 Jan 2021
My boss was going to a massive trade show in the Arabic-speaking Gulf. There was no way she’d have time to collect paper inquiries as she usually did – particularly with so much of her particular target audience still struggling with English.
I generated a QR code for this landing page’s URL and had it printed on a massive poster, so people could photograph it over the heads of a crowd.
The landing page itself simply asked two questions:
- name (using Latin A-Z letters only)
- e-mail address (same constraints).
Our mailing list tool’s autoresponder took care of delivering a more thorough e-mail in Arabic.
HTML-wise, I’m proud of what I learned about the
dir="rtl" option so that field labels would display cleanly.
My error messages had to be in English (so my boss could understand them if shown one) and in Arabic.
And finally, many visitors’ smartphones would have Arabic-alphabet keyboards by default. I needed to constrain input to the Latin alphabet (for the sake of our mass mailing tool) and, if someone tried to enter Arabic characters, present a different error message from the one they’d receive if they simply left a field blank.
You can play with my form to see if you think it works. Try leaving “name” blank, “email” blank, or copying some Arabic from the labels into the “name” field and submitting the form.
I didn’t realize it at the time, but I got my first taste of making an HTTP POST request when I edited some form HTML provided to us by our mass mailing tool. (This code is so old, the endpoint was over HTTP, not HTTPS! Yikes.)
I put two visible fields into my form’s HTML: name and email. The Arabic in the field labels and the pop-up error messages is a bit crude, but I can’t find our final edits proofread by native speakers anymore.
formValidator() function, which is attached to the HTML’s opening
The function simply runs 3
if statements, one after the other, adding text to a string called
alert() to pop up the value of
helperMsg. I hadn’t really started coding at the time yet, so I probably took that pattern from one of my company’s existing landing pages coded by a professional.
I’m sure I didn’t understand regular expression patterns when I copied
[^A-Za-z .-] off the internet, but it did the job to prevent Arabic characters from getting through in the “name” field.
It looks like in the end, I didn’t bother validating the character set of values entered into the “email” field, but simply relied upon browsers’ interpretations of
<input type="email"> to get close enough on my behalf. (Seems risky in 2011, but cool, I guess? Or maybe I added it later into the long-lost final codebase.)