Previous Page
Next Page

Checking Fields against Each Other

It's common to want to check one field against another, especially when you're asking the user to type in a password. You want to make them type it in twice for accuracy, and you want to make sure that they typed the same thing both times.

This example reuses Scripts 7.5 (HTML) and 7.6 (CSS); and only a few lines of JavaScript need to be added to Script 7.7 (Script 7.8) to give the script the extra cross-checking functionality. The result is shown in Figure 7.6; once again, when the check fails, the offending field gets a red border.

Script 7.8. Use this script to compare the value of one field to another. Do they match?

window.onload = initForms;

function initForms() {
     for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = function() {return validForm();}
     }
}

function validForm() {
     var allGood = true;
     var allTags = document.getElementsByTagName("*");

     for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
           allGood = false;
        }
     }
     return allGood;

     function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split(" ");

        for (var j=0; j<allClasses.length; j++) {

        outClass += validBasedOnClass(allClasses[j]) + " ";
     }

     thisTag.className = outClass;

     if (outClass.indexOf("invalid") > -1) {
        thisTag.focus();
        if (thisTag.nodeName == "INPUT") {
           thisTag.select();
        }
        return false;
     }
     return true;

     function validBasedOnClass(thisClass) {
        var classBack = "";

        switch(thisClass) {
           case "":
           case "invalid":
              break;
           case "reqd":
              if (allGood && thisTag.value == "") classBack = "invalid ";
              classBack += thisClass;
              break;
           default:
              if (allGood && !crossCheck(thisTag,thisClass)) classBack = "invalid ";
              classBack += thisClass;
        }
        return classBack;
     }

     function crossCheck(inTag,otherFieldID) {
        if (!document.getElementById(otherFieldID)) return false;
        return (inTag.value == document.getElementById(otherFieldID).value);
     }
   }
}

Figure 7.6. The two password fields cross-check to make sure their contents are identical. In this case, not so much.

[View full size image]


To check one field against another:

1. 
if (allGood && !crossCheck(thisTag, thisClass)) classBack = "invalid ";



We're now checking to make sure that the two password fields are the same. Because (see Script 7.5) the second password field has a class containing passwd1, this JavaScript knows that it has to crosscheck the second field against the first. Here in the default block of the conditional is where that's handled. If allGood is true and the crossCheck() function (see below) spotted a problem (and returned false), then we want to set classBack to invalid.

2. 
function crossCheck(inTag, otherFieldID) {
  if (!document.getElementById (otherFieldID)) return false;
  return (inTag.value == document.getElementById(otherFieldID). value);
}



Here's the crossCheck() function. It takes in the current tag and the id of the other field to check against. In this case, the current tag is the passwd2 <input> and the id of the other field is passwd1. If the other field doesn't exist, no check can be done; that's a problem, so the function returns false. Otherwise, the fields both exist, so we compare their values: if they're equivalent, true is returned; if they aren't, false is returned.

Tip

  • This script does not check against a master password database to see if the password the user entered is valid; that requires a CGI on the server. It just makes sure that when a password is entered twice, it is the same value both times.



Previous Page
Next Page