Form Validation with JavaScript Regular Expressions (Part 2)

We then need to actually test that each of the values submitted are in the correct format. I accomplished this by using a series of nested if statements and alerts. This method is useful for demonstration and testing purposes, although in reality, a for…next loop would probably be more efficient, and some kind of color highlighting scheme that would flag the erroneous input values a different color, say red, on the form itself would be more professional. The example if statements and alerts however, can be constructed as follows:

if (fnameRegxp.test(fname) != true)

  alert("First name appears to be incorrect");

    if (lnameRegxp.test(lname) != true)

      alert("Last name appears to be incorrect");

        if (houseRegxp.test(house) != true)

          alert("Address 1 appears to be incorrect");

            if (pcodeRegxp.test(pcode) != true)

              alert("Address 2 appears to be incorrect");

                if (telnoRegxp.test(telno) != true)

                  alert("Telephone number appears to be
incorrect");

                    if (emailRegxp.test(email) != true)

                      alert("Email address appears to be
incorrect");

                        if (email != verEmail)

                          alert("Email appears to be
incorrect");

                            if (urlRegxp.test(url) != true)

                              alert("URL appears to be
incorrect");

                                if (dobRegxp.test(dob) !=
true)

                                  alert("Date of Birth
appears to be incorrect");

Notice that instead of using a regular expression to check that the second email address entered (that should be the same as the first for verification purposes) is correct, we simply check that its value is exactly the same as the first email address entered. 

Finally, if all of the data is in the correct format, we need this program to output a "Data Correct" alert and change the value of the action property of the form to the name of the cgi function that will process the data. Once again, against a professional backdrop, the true alert would probably be removed in favor of a fresh page thanking the visitor for their time, but this is useful for demonstration and testing purposes:

else {

  alert("Data Correct");

  document.myForm.action.value = "process.cgi";

  }

}

</script>

Another benefit to using regular expressions to validate user input is that any fields that are checked against a regular expression fail if the field is left blank, so you don’t have to write any separate omission checking functions.

Explaining regular expressions is almost as difficult as coding them. It will be far easier for you to see what I mean by writing and playing around with them yourself. Unfortunately, it is not possible to be 100 percent certain that all information entered is correct, but with regular expressions you can at least be sure that 99 percent of the data is correct. 

Although this may seem like a cumbersome amount of code, without regular expressions, it would be ten times as long.  Using client-side validation is not the securest way to validate your forms, but it may save processing time on your server by ensuring that only correct data is passed to it in the first place. Other than that, JavaScript is both quick and easy to implement and the regular expressions subset of the language is simpler than that of some of the more powerful Web programming languages, so for sites that don’t need maximum security, it is certainly worth considering.