Tuesday, June 24, 2008
Incompatible Options II
Blog Entry #117
Welcome back, Weekend Silicon Warriors, to our ongoing analysis of HTML Goodies' "A Case for a Case" tutorial. Having sorted out the tutorial's validation script in the previous entry by
(a) adding a default clause to the outer switch statement, and
(b) appending break statements to the case clauses of the outer switch statement,
we are ready to roll out a script demo, which appears in the div below. The Submit Your Top/Base Choices 'submit button' is actually a
<input type="button" value="Submit Your Top/Base Choices" onclick="checkTopAndBase(this.form);" />
generic push button; your Top/Base choices will not be sent to me or anyone else when you click it. 'Correct' Top/Base combinations will be greeted by a "Thank you for your purchase!" message; 'incorrect' Top/Base combinations will be greeted by the script's original "Sorry, wrong Top and Base combination." error message.
Welcome to the "Case for a Case" demo.
Dear customers:(1) You must choose both a Top module and a Base module.
(2) Top #1 can only be paired with Base #1, #2, #5, or #6.
(3) Top #2 can only be paired with Base #1, #2, #5, or #6.
(4) Top #3 can only be paired with Base #2, #3, #4, #6, or #7.
If you don't follow these rules, then we'll call up Cousin Vinnie over at HTML Goodies and have him take care of you. ;-)
Thank you for your cooperation.
In putting together this demo, I found (contra an earlier version of the previous post) that when the outer switch statement's default clause is placed after its third case clause, then fallthrough will occur for the Top #3/Base #2, Top #3/Base #3, Top #3/Base #4, Top #3/Base #6, and Top #3/Base #7 pairings, and generate "Please choose a Top module." false-negatives, if the third case clause does not conclude with a break statement.
Validation via regular expressions
When I think of form validation, my first instinct is to reach for Mr. Regular Expression. In this section, we'll use the following simple regular expressions to carry out the "Case for a Case" validation and compact the script code even further:
var Top1or2 = /1|2|5|6/;
var Top3 = /2|3|4|6|7/;
The Top1or2 pattern matches one of the theForm.base.selectedIndex indexes for the Base #1, Base #2, Base #5, or Base #6 options that go with Top #1 or Top #2; similarly, the Top3 pattern matches one of the theForm.base.selectedIndex indexes for the Base #2, Base #3, Base #4, Base #6, or Base #7 options that go with Top #3 - pretty straightforward, eh?
Regular expression (regexp) pattern notes
(1) The above regexp patterns won't be changing, so
for better performance, I've created them using the regexp literal syntax (as opposed to using new RegExp( ) constructor statements) per Mozilla's recommendation.
(2) In a regexp pattern, a vertical bar (|) functions as a logical OR operator.
(3) Regarding the base selection list, the only user input we'll be checking are the integer returns of the selectedIndex property, so there's no need to begin the Top1or2 and Top3 patterns with ^ start-of-string anchors or end the patterns with $ end-of-string anchors.
Before we utilize these patterns, however, let's first deal with the didn't-choose-a-Top/Base possibilities, which can be handled by the if statement below:
if (theForm.top.selectedIndex == 0 || theForm.base.selectedIndex == 0) {
window.alert("Please make selections from both the Top menu and the Base menu.");
return false; }
All 21 Top/Base combinations can then be checked via a subsequent else block:
else {
if ((theForm.top.selectedIndex != 3 && Top1or2.test(theForm.base.selectedIndex)) ||
(theForm.top.selectedIndex == 3 && Top3.test(theForm.base.selectedIndex))) {
window.alert("Thank you for your purchase!"); return true; }
else {
window.alert("Your chosen Base cannot be paired with your chosen Top.");
theForm.base.focus( );
return false; } }
And as Vince would say,
That's the entire validation!The else block's nested if statement packs a lot of action into three lines of code; in plain English, here's what it says:
(1) (a) if ((theForm.top.selectedIndex != 3
IF the index of the user's choice from the top selection list is not equal to 3, i.e., if the user selects Top #1 or Top #2...
(b) && Top1or2.test(theForm.base.selectedIndex)) ||
...AND the index of the user's choice from the base selection list matches one of the digits in the Top1or2 regexp pattern, i.e., if the user selects Base #1, Base #2, Base #5, or Base #6, OR...
(2) (a) (theForm.top.selectedIndex == 3
...the index of the user's choice from the top selection list is equal to 3, i.e., if the user selects Top #3...
(b) && Top3.test(theForm.base.selectedIndex)))
...AND the index of the user's choice from the base selection list matches one of the digits in the Top3 regexp pattern, i.e., if the user selects Base #2, Base #3, Base #4, Base #6, or Base #7, then...
(3) (a) { window.alert("Thank you for your purchase!");
...pop up a "Thank you for your purchase!" message on an alert( ) box...
(b) return true; }
...and return a Boolean true to the onsubmit checkTopAndBase( ) function call, i.e., go ahead and submit the form to its processing agent.
If you are unfamiliar with the test( ) method of the core JavaScript RegExp object, Mozilla briefly discusses it here.
I prefer the regular expressions approach to validating the "Case for a Case" scenario, although there's definitely something to be said for the intuitively readable switch statement approach, which lays out the allowed Top/Base combinations in a nice, orderly fashion.
To anyone who wants to 'go beyond the basics' of Web coding, I highly recommend a study of regular expressions, which I have found pays major dividends in grappling with the minutiae of the coding world.
Your assignment
You produce a for-pay Web newsletter that analyzes stock market trends. When subscribers sign up for your newsletter, you ask for their birthdays so that you can send them birthday greetings.
(a) Code a suitable form that contains, among other controls, a January-December birthMonth selection list and a 1-31 birthDate selection list.
(b) Write a switch statement-based validation function that will prevent your subscribers from inputting 'erroneous' birthdays, e.g., February 30, April 31, etc.
Moving up the Beyond HTML : JavaScript page brings us to the
obviously outdated"JavaScript Y2k Fix" tutorial, which we will not cover in a separate entry. For generating four-digit years, I trust y'all know that the getYear( ) method of the JavaScript Date object has been deprecated and that you're supposed to use the getFullYear( ) method instead. However, "JavaScript Y2k Fix" offers a getYear( )-based script that creates post-1999 four-digit years for users whose browsers don't support the getFullYear( ) method, and if that's your situation, then your system is even more ancient than mine is, and (like me) you really do need to upgrade.
Next tutorial, please...that would be "Minimize/Maximize a Browser Window", whose Netscape-specific script contains functions that (sort of) mimic the Minimize and Maximize Buttons of the Windows window interface and which we'll look over in the following entry. I'll see what I can do to get the "Minimize/Maximize a Browser Window" script to work with MSIE - if I'm successful, I'll tell you about it, and if I'm not successful, then I'll tell you about that, too.
reptile7
- posted by A. Peak @ 3:06 PM
Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)