Car Picker Validation

<SCRIPT>

function validEmail(email) {
     if (email == "") return false; // cannot be empty

     // invalidChars - invalid characters for an email address.
     var invalidChars = " /:,;";   // NOTE: 1st char is a space

badChar saves the position of the invalid character in the invalidChars string. For example, if the invalid character was a colon, badChar would contain 2, the position of the colon in the five-character string.

String.charAt() gets the nth character from a string

     for (i = 0; i < invalidChars.length; i++) {
          // does it contain any invalid characters?
          var badChar = invalidChars.charAt(i);

indexOf looks for the position of a character in a string. If the result of the indexOf function is –1, the character isn't in the string, and you again get a false result.

String.indexOf(substring, start) returns the position of the first occurrence of the substring that appears after the start position, if any, or –1 if no such occurrence is found.

substring  – "substring" that is to be searched for within string

start – an optional integer argument that specifies the position within the string at which the search is to start. Legal values are 0 (the position of the first character in the string) to string.length – 1 (the position of the last of character in the string). If the argument is omitted, the search begins at the first character of the string.

          if (email.indexOf(badChar, 0) > -1) return false;
     }

Checking to see if there is at least one @ within the string

     // there must be one "@" symbol
     var atPos = email.indexOf("@", 1);

     // atPos will only equal -1 if there wasn't an @ within the string
     if (atPos == -1) return false;

If an @ is found within the string, we want to make sure that there isn't more than one @, so we start searching from that position + 1, where the first @ was found, to the end of the string searching for another @. If another @ is found the indexOf will not return a –1, but will return a number, the position of the found @. If the indexOf != -1, means that an additional @ was found, hence false.

     // and only one "@" symbol
     if (email.indexOf("@", atPos + 1) != -1) return false;

Checking to see if there is at least one "." within the string

     // periodPos will only equal -1 if there wasn't an "." within the string
     var periodPos = email.indexOf(".", atPos);

     // and at least one "." after the "@"
     if (periodPos == -1) return false;

email.length is a property of email that gives us the length of the email address. After the first "." is found we to make sure that two or three characters exist (.uk, .de, .com, .org, etc…)

     // there must be 2 or 3 characters after the "."
     if (email.lastIndexOf(".") + 3 > email.length) return false;
     if (email.length > email.lastIndexOf(".") + 4) return false;

     return true;
}

Checking:
1) if a value was passed
2) then checking to see if the individual digits are numbers by making sure that they fall between 0–9.

function isNum(passedVal) { // Is this a number?
     if (passedVal == "") return false;

String.charAt() get the nth character from a string, in this case passedVal.charAt(i) is the ith digit which is then checked to see if it is a number. passedVal.length is the length or number of digits of the Number passed.

charAt checks the character at the position i. If the character is less than "0" or greater than "9", it isn't a digit, so bail out and declare the input to be non-numeric, or false. If the result is true, you've a got a numeric Zip Code.

     for (i = 0; i < passedVal.length; i++) {
          if (passedVal.charAt(i) < "0") return false;

          if (passedVal.charAt(i) > "9") return false;
     }

     return true;
}

Checking:
1) if a value was passed
2) then checking to see if the individual digits are numbers by making sure that they fall between 0–9.

function validZip(inZip) { // Is this a valid Zip Code?
     if (inZip == "") return true;

The value is passed to the isNum function above.

     // Check if the Zip Code is numeric
     if (isNum(inZip)) return true;

     return false;
}

function submitIt(form) { // make sure they enter a color
     var colorChoice = form.color.selectedIndex;

form.color.selectedIndex is the (index) position of the option selected. In this particular case, the option selectedIndex = 0 has no value by design. If an individual made no selection, the condition below would exist. If an individual chose an option, by actually selecting something, then the selectedIndex would be > 0 and the remaining options all have values assigned to them, again by design.

     if (form.color.options[colorChoice].value == "") {
          alert("You must pick a color");
          return false;
     }

Make sure they enter in a number of doors. doorOption = -1 is obviously not a valid number of car doors. doorOption is acting as a switch, only getting set if a radio button is checked. If a radio button is checked then doorOption is set to the index of that radio button, hence not equal to –1.

     var doorOption = -1;

form.DoorCt.length is the number of radio buttons.

     for (i = 0; i < form.DoorCt.length; i++) {
          if (form.DoorCt[i].checked) doorOption = i;
     }

if doorOption switch is not set then we know that no radio button was checked.

     if (doorOption == -1) {
          alert("You must choose 2 or 4 door");
          return false;
     }

With your forms, you'll often find that if the user makes one choice, that choice will dictate the value of other fields on the form. For example, let's say that the sunroof option is only available on a two-door model. You could deal with it this in two ways. First, you could check the entry and put up an alert dialog if the user makes the wrong choice.

     // can't have the sunroof with a four door
     if (form.DoorCt[doorOption].value == "fourDoor" && form.sunroof.checked) {
          alert("The sunroof is only available on the two door model");
          return false;
     }

But it's better design to simply make the entry for the user. So if the user picks the sunroof, the script automatically clicks the two-door button. This function actually occurs at very end of the script. It is placed here for illustrative purposes only.

if (sunroofField.checked) sunroofField is checked then we need to make sure that the "Two Door" radio is also checked.

document.myForm.DoorCt.length is the length or number of radio buttons. We need to cycle through the entire "length", looking at the radio buttons until we find the one equal to "twoDoor", document.myForm.DoorCt[i].value == "twoDoor".

Once found, we make sure that we check that particular radio button, document.myForm.DoorCt[i].checked = true

function doorSet(sunroofField) {
     if (sunroofField.checked) {
          for (i = 0; i < document.myForm.DoorCt.length; i++) {
               if (document.myForm.DoorCt[i].value == "twoDoor") {
                    document.myForm.DoorCt[i].checked = true;
               }
          }
     }
}

  1. When the user clicks the OK button on the alert box, the script returns the cursor to the form's email field with the focus() command.
  2. Then it selects the contents of the field with the select() command.

Input.select() selects the text displayed in a text, textarea, password, or fileupload element. This method produces the same result as the user dragging the mouse across all the text in the specified text object. On most platforms, this produces the following effects:

  • the text is hightlighted, often displayed with colors reversed.
  • if the text remains, selected the next time the user types a character, the selected text is deleted and replaced with the newly typed character.
  • the text becomes available for cut & paste.

     // check to see if the email's valid
     if (!validEmail(form.emailAddr.value)) {
          alert("Invalid email address");
          form.emailAddr.focus();
          form.emailAddr.select();
          return false;
     }

selectedIndex - specifies the index of the selected option within the Select element. If the Select element has it MULTIPLE attritube set and allows multiple selections, this property only specifies the index of the first selected item or -1 if none are selected.

     if (form.zip.value == "" && form.dealerList.selectedIndex == 0) {
          alert("You must either enter a Zip code, or pick the dealer closest to you");
          form.zip.focus();
          return false;
     }

     if (!validZip(form.zip.value)) {
          alert("That is an invalid Zip code");
          form.zip.focus();
          form.zip.select();
          return false;
     }

     // If we made it to here, everything's valid, so return true
     return true;
}

function doorSet(sunroofField) {
     if (sunroofField.checked) {
          for (i = 0; i < document.myForm.DoorCt.length; i++) {
               if (document.myForm.DoorCt[i].value == "twoDoor") {
                    document.myForm.DoorCt[i].checked = true;
               }
          }
     }
}

<SCRIPT>

<BODY>

<FORM
NAME="myForm"
METHOD="POST"
ACTION="formmail.pl"
onSubmit="return submitIt(this)">

Your Email Address: <INPUT TYPE="text" NAME="emailAddr">

Colors:

<SELECT NAME="color">
     <OPTION VALUE>Choose a color
     <OPTION VALUE="red">Red
     <OPTION VALUE="green">Green
     <OPTION VALUE="blue">Blue
</SELECT>

Options:

<INPUT TYPE="checkbox" NAME="sunroof" VALUE="yes"
  onClick="doorSet(this)">Sunroof (Two door only)
<INPUT TYPE="checkbox" NAME="pSteering" VALUE="yes">Power Steering
<INPUT TYPE="checkbox" NAME="pBrakes" VALUE="yes">Power Brakes
<INPUT TYPE="checkbox" NAME="fMats" VALUE="yes">Floor Mats

Doors:

<INPUT TYPE="radio" VALUE="twoDoor" NAME="DoorCt">Two
<INPUT TYPE="radio" VALUE="fourDoor" NAME="DoorCt">Four

Either enter your Zip code, or pick the dealer nearest you: Zip:
<INPUT TYPE="text" NAME="zip">

<SELECT NAME="dealerList">
     <OPTION>California--Lemon Grove
     <OPTION>California--Lomita
     <OPTION>California--Long Beach
     <OPTION>California--Los Alamitos
     <OPTION>California--Los Angeles
</SELECT>

<INPUT TYPE="Submit" VALUE="Submit"> <INPUT TYPE="Reset" VALUE="Reset">

</FORM>