Using JavaScript to Secure a Form

 

This tells the browser to call the JavaScript parser
<script language="JavaScript">
<!--
/* This is a comment
This function calls a series of subfunctions, each of which checks a single form element for
compliance with a specific string format and returns a message describing the error. If the
function returns an empty string, we know the element complies.

The JavaScript regular expression /\W/ is a standard character class that's handily predefined
to mean "any character other than letters, numbers, and underscores." So we set the variable
illegalChars equal to that regular expression, and then test the username string against that
variable to see if a match is found. If it is, we throw up a warning.
*/

This is the function called by the form. Notice that it receives theForm in the parameters.
function checkWholeForm(theForm)
{
    This is a variable called "why". It will hold the message that goes in the alert box. It will be different for different users, depending on what errors they have. This function builds why. It begins as an empty string "".
     var why = ""; // initiates the why variable to an empty string

     This line has three intersting pieces, 1) why uses += to pick up the 2) results of another function called checkFirstName. 3) It sends the value from the form to checkFirstName. Go to checkFirstName to see how it works.
     why += checkFirstName(SignUp.FirstName.value);

why += checkLastName(SignUp.LastName.value);
// adds the value (error) returned from checking the LastName field to the why string

why += checkUsername(SignUp.UserName.value);
// adds the value (error) returned from checking the UserName field to the why string

why += checkPassword(SignUp.Password.value);
// adds the value (error) returned from checking the Password field to the why string

why += checkEmail(SignUp.Email.value);
// adds the value (error) returned from checking the Email field to the why string


alert(why)
} // end checkWholeForm

    This is another function. It is called by checkWholeForm(). Notice first in the parenthesis. This puts the first name in a variable called first. Then it sets up a variable called error. Like why, this is an empty string because we don't know yet which error has to be sent back to checkWholeForm().
 function checkFirstName (first)
    {
    var error = "";

    The first thing the function checks is to see if the user didn't enter anything in the first name field. == is a comparison operator. If the script uses =, it would mean that first equals an empty string. In this case, we just want to check if it is already an empty string. If it is an empty string, it the error message will change to the words.
    if (first == "")
    {
        error = "You didn't enter a First Name.\n";
    } // end if

    Now the function checks to see if the first name is too long. This often happens if someone accidentally types their first and last name in the same field. That would make an error in your database.
    if (strng.length > 15)
    {
        error = "The First Name field can only take 15 characters.\n";
    } // end if

        Now the function checks to see if the first name has garbage in it. Remember that characters can be entered as malicious code.
     var illegalChars = /\W/;
    // allow only letters, numbers, and underscores
    if (illegalChars.test(strng))
    {
        error = "The First Name field contains illegal characters.\n";
    } // end if

            After the function has picked the correct error - or no error at all, it sends the message back to why.
    return error;
} // end checkFirstName

function checkLastName (strng)
{
var error = "";
if (strng == "")
{
error = "You didn't enter a Last Name.\n";
} //end empty if

if (strng.length > 30)
{
error = "The Last Name field can only take 30 characters.\n";
} // end string length if

var illegalChars = /\W/;
// allow only letters, numbers, and underscores
if (illegalChars.test(strng)) {
error = "The Last Name field contains illegal characters.\n";
} // end illegal chars if

return error

} // end checkLastName

function checkUsername (strng)
{
var error = "";
if (strng == "")
{
error = "You didn't enter a UserName.\n";
} // end empty if

if ((strng.length < 6) || (strng.length > 15))
{
error = "The UserName must be 6 to 15 characters long.\n";
} // end string length if

var illegalChars = /\W/;
// allow only letters, numbers, and underscores
if (illegalChars.test(strng)) {
error = "The User Name can only have letters, numbers and underscores.\n";
} // end illegal chars if

return error
} // end checkUserName

function checkPassword (strng)
{
var error = "";
if (strng == "")
{
error = "You didn't enter a Password.\n";
} // end empty if

if ((strng.length < 6) || (strng.length > 10))
{
error = "The Password must be between 6 and 10 letters, numbers and/or _\n";
} // end string length if

var illegalChars = /\W/;
// allow only letters, numbers, and underscores
if (illegalChars.test(strng)) {
error = "The Password contains illegal characters.\n";
} // end illegal chars if

return error
} // end Password

function checkEmail (strng)
{
var error="";
if (strng == "")
{
error = "You didn't enter an email address.\n";
} // end empty if

/* The email is filtered for a correct email format before it is checked for
illegal characters. */
var emailFilter=/^.+@.+\..{2,3}$/;
if (!(emailFilter.test(strng)))
{
error = "Please enter a valid email address.\n";
} // end email format if
else
{
//test email for illegal characters
// information about regular expressions: http://www.webreference.com/js/column5/
var illegalChars= /[\(\)\&lt;\&gt;\,\;\:\\\"\[\]]/
if (strng.match(illegalChars))
{
error = "The email address contains illegal characters.\n";
} // end check for illegal chars if
} // end else
return error;
}

//-->
</script>