OneFreeVoice

It’s not hard to find examples of javascript form validation on the net. Just google and you’ll find plenty. Unfortunately, most examples only show how to check for different types of fields, and don’t show a complete solution. The result seems to be an internet flooded by poorly coded form validation… which ultimately leads to end user frustration.

Consider the following:

     function validateForm() {
          if (document.forms(0).field1.value = '') {
               alert("You must enter a value in field1");
               return false;
          }
          if (document.forms(0).field2.value = '') {
               alert("You must enter a value in field2");
               return false;
          }
          return true;
     }

Now on the face of things, that looks pretty good, right? The problem is, what happens when the user tries to submit the form with both field1 and field2 blank. First they’re going to get the error message: “You must enter a value in field1″ and then they will put a value in field one and submit again. Now they get the error message: “You must enter a value in field2.” Well that’s just plain annoying, why didn’t you tell me that in the first place.

I’ve seen people try to combat this by checking everything up front, but IMHO, they still fall way short:

     function validateForm() {
          var intError = 0;
          if (document.forms(0).field1.value = '') {
               intError++;
               alert("You must enter a value in field1");
           }
          if (document.forms(0).field2.value = '') {
              intError++;
              alert("You must enter a value in field2");
           }
           if (intError > 0) {
                return false;
           }
           else {
                return true;
           }
     }

I’ve run into this one quite a bit, and while at least they are checking everything up front, it can get extremely annoying. Consider again if you submit this 2 field form without entering anything. First you get the pop-up “You must enter a value in field1″, then after closing that you get another pop-up “You must enter a value in field2″. Okay. So for a two-field form, this may not be a big deal. The other day I came upon a site with 10 or 11 fields, and after about 4 pop-ups in a row, I bailed.

To combat the issue, I always try to give the end user as much information as possible in a single, nicely formatted alert. The key here is appending error messages together and using the “\n” line break.

     function validateForm() {
          var intError = 0;
          var strError = "Sorry, we could not process your request for the following reasons:\n";
          strError = strError + "----------------------------------------------------------------------------------------";
          if (document.forms(0).field1.value = '') {
               intError++;
               strError = strError + "You must enter a value in field1\n";
           }
          if (document.forms(0).field2.value = '') {
              intError++;
              strError = strError + "You must enter a value in field2\n";
           }
          strError = strError + "----------------------------------------------------------------------------------------";
          if (intError > 0) {
                alert(strError);
                return false;
           }
           else {
                return true;
           }
     }

Any user who submits a blank form would get a nice thorough message in a single pop-up:

Sorry, we could not process your request for the following reasons:
—————————————————————————————-
You must enter a value in field1
You must enter a value in field2
—————————————————————————————-

As usual, comments are open (hey, I *enjoy* deleting the spam!), so if you notice any glaring omissions or can point to better methods, please let me know.