KatieI dismiss my JavaScript skills all the time because it's not my primary practice, but I was awfully proud of the first program I ever wrote, in late 2011. Would you like to see it?
Backstory
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 SPAN tag's dir="rtl" option so that field labels would display cleanly.
However, any good form on the internet needs validation, and my validation rules were complex enough to require JavaScript.
- My error messages had to be in English (so my boss could understand them if shown one) and in Arabic.
- 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.
Code
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.
All the JavaScript is in one massive formValidator() function, which is attached to the HTML's opening FORM tag.
The function simply runs 3 if statements, one after the other, adding text to a string called helperMsg as it goes. If anything was wrong, it uses JavaScript's 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.)
As long I was careful to use an appropriate text editor, JavaScript and properties within HTML tags don't seem to need much special treatment to handle the two alphabets' different directionalities. I notice that the Arabic string literals typically stand alone, isolated from any English, in my JavaScript string variables and between HTML tags, but that's probably to facilitate copy-paste operations and selecting Arabic text with my cursor on a left-to-right-based computer.
<html>
<head>
<title>Request Information</title>
<!-- I still need to clean this HTML up -->
<!-- Recommended by a different person -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- end -->
<!-- Recommended by one person -->
<meta name="MobileOptimized" content="width" />
<meta name="HandheldFriendly" content="true" />
<!-- end -->
<script type="text/javascript">
function formValidator() {
var formOkay = true;
var helperMsg = "";
// Checks whether the user entered his/her name, and sets variables accordingly.
var name = document.getElementById("name");
if (name.value.length == 0) {
formOkay = false;
helperMsg =
helperMsg +
"Please enter your Name.\n" +
"الاسم: الإلزامية" +
"\n\n";
}
// Checks whether the name the user provided contains any disallowed characters ([^A-Za-z .-]) and sets variables accordingly.
var englishNamePatt = /[^A-Za-z .-]/;
if (englishNamePatt.test(name.value) == true) {
formOkay = false;
helperMsg =
helperMsg +
"Please only use English in your Name.\n(This means the letters A-Z, a-z, hyphens (-), periods (.), and spaces.)\n" +
"الإنجليزية: الإلزامية" +
"\n(A-Z) (a-z) (-) (.) ( )" +
"\n\n";
}
// Checks whether the user entered his/her email address, and sets variables accordingly.
var email = document.getElementById("email");
if (email.value.length == 0) {
formOkay = false;
helperMsg =
helperMsg +
"Please enter your E-mail Address.\n" +
"البريد الإلكتروني: الإلزامية" +
"\n\n";
}
// Displays an alert letting the user know what he/she did wrong.
if (formOkay == false) {
alert(helperMsg);
}
// Ensures the form won't submit if the validator is not satisfied.
return formOkay;
}
</script>
</head>
<body>
<!-- Next steps : (*) Good (close to mass-mailing tool validation) in-form email validator, (*) Fix zooming, (*) Branding & possibly change "what this form will do for you" text, (*) Arabic -->
<p style="font-size: medium">
<b>Our Company</b><br />
<span dir="rtl">شركتنا</span>
</p>
<p style="font-size: medium">
<b>Request Information</b><br />
<span dir="rtl">احصل على المعلومات</span>
</p>
<form onsubmit="return formValidator()" action="http://example.com/subscribe" method="post" name="theForm">
<label for="firstname" style="display: block; font-size: small">
<b>Name (in English):</b><br />
<span dir="rtl">الاسم (باللغة الإنجليزية):</span><br />
</label>
<input type="text" id="name" name="name" maxlength="100" placeholder="Name" alt="Name" title="Name" style="display: block; width: 100%; font-size: xx-large; margin-bottom: 0.2em;"/>
<label for="email" style="display: block; font-size: small">
<b>Email:</b><br />
<span dir="rtl">البريد الإلكتروني:</span><br />
</label>
<input type="email" id="email" name="email" placeholder="Email Address" alt="Email Address" title="Email Address" style=" display: block; width: 100%; font-size: xx-large; margin-bottom: 0.2em;"/>
<input type="submit" name="subscribe" value="Submit • التسجيل" style="display: block; padding: 0.65em 0em; font-size: large"/>
<input type="hidden" name="list" value="conference_floor" />
<input type="hidden" name="name_required" value="T" />
<input type="hidden" name="confirm" value="many_hello" />
<input type="hidden" name="showconfirm" value="F" />
<!-- Enable this at the last minute once I get around to making this web page:
<input type="hidden" name="url" value="http://www.example.com/thankyou">
-->
</form>
</body>
</html>
What's the first project you made?
