JavaScript Non-History

From what I have seen of code that some JavaScript beginners are asking about, their teacher is not only teaching early JavaScript history, they are teaching ways that were considered to be poor ways to achieve the result even in early browsers. One example I saw was some code using prompts and alerts in loops with regular expressions to validate what was being entered by the user. Now even the earliest browsers to support JavaScript before support for regular expressions were added allowed event handlers to be added to form fields in the HTML to allow the field to be validated by the browser. This means that the overly complicated loops using prompt to input the information were never needed for this type of processing even in browsers that supported JavaScript but not regular expressions. This means that the apparently historic code that some JavaScript classes are teaching never needed to be written the way that they are teaching and could always be written in a far better way.

Right from the beginning JavaScript has worked best as an event driven language and has allowed event driven processing to be attached to links and form fields. The situation where prompts were required was where user input was needed to determine what the page was to display and since the earliest browsers only allowed JavaScript to update the HTML by using document.write to generate the HTML from the JavaScript, using prompt was needed where the user input needed to change what the page displayed in Netscape 2 and 3 (neither of which supported either regular expressions or any easy way to update the page content once it was loaded.

So the complicated mess of prompt, alert and regular expressions for field validation that some classes are still teaching wouldn't work in the earliest JavaScript enabled browsers that didn't support regular expressions and was unnecessary in any browser that allowed event handling to be attached to form fields (ie. any browser that supports any JavaScript at all).

Since the code these classes are teaching was never needed for any browser I am not even going to show how that code should be written in order to work as the obvious first steps when you see such code are to get rid of the prompts and the loops and set up a form instead. In other words the way the conversion with the prompts and loops should be written is without the prompts and loops. With the example I saw that was attempting to input and validate a username using three prompts, two alerts and two while loops with a regular expression to check that the username was between 1 and 15 characters with only letters, numbers, underscores, hyphens and dots allowed, the whole thing could be replaced in Netscape 4 with the following code that has no prompts, no loops and only the one alert:

<input type="text" name="user" onblur="if (!/^[\w\.-]{1,15}$/.test(this.value)) alert('Username cannot be empty AND cannot exceed 15 characters. It can only include alphabet letters(lower of upper case,digit_numbers,hyphen(-),underscore(_)and period punctuation(.)');">

For earlier versions of Netscape and IE that supported JavaScript but not regular expressions you would need to use a loop to dissect the input and check each character individually against a list of valid characters in order to perform the validation without a regular expression. The prompts and their loops were unnecessary even in those browsers as they can be easily replaced with a single event handler as shown in the above Netscape 4 example. For example to allow the above code to work in Netscape 2 we could substitute valid(this.value) for the regular expression in the above code and provide the following function to do the validation:

function valid(textField) {
var validChars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890-_.';
for (i=o; iif (validChars.indexOf(textField.charAt(i),0) == -1)
{return false;}
}
return true;
}

Now that example needed one alert and an event handler embedded in the HTML in order to provide the functionality but by the time that Netscape 4 had died out the alert had become unnecessary and it was possible to move the event handler out of the HTML and to keep the JavaScript completely separate. For browsers such as IE5 we could keep the JavaScript completely separate from the HTML and also update the error message directly into the web page instead of having to use a dialog box. The code we need becomes slightly longer but allows us to keep the JavaScript separate making it easier to apply the same script on multiple pages without needing multiple copies of the script.

<input type="text" name="user" id="user">
<p id="usermsg">&nbsp;</p>
<script>
var usr = document.getElementById('user');
usr.onblur = function() {
if (/^[\w\.-]{1,15}$/.test(usr.value))
document.getElementById('usermsg').innerHTML = '&nbsp;';
else
document.getElementById('usermsg').innerHTML = 'Username cannot be empty AND cannot exceed 15 characters. It can only include alphabet letters(lower of upper case,digit_numbers,hyphen(-),underscore(_)and period punctuation(.)';
};
</script>

Modern browsers make things easier. As validating form fields with regular expressions in the browser itself is so useful a couple of extra attributes have been added to the HTML for form fields so that the validation can be performed without needing any JavaScript at all (and so it should still work in browsers with JavaScript turned off). The following HTML provides the validation within the HTML itself without requiring any JavaScript at all in modern browsers.

<input type="text" name="user" required pattern="[\w\.-]{1,15}">

Notice that the various pieces of code shown above provide a complete history of form field validation from the earliest browsers that supported JavaScript through to the latest ones that can perform the validation without JavaScript. At no point in JavaScript's history was it ever appropriate to solve this problem using prompts.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate