JavaScript Tips & Tricks

Posted below are various JavaScripts for doing different things.

Take me to...

• Validating Username & Password
• Using An Array to Validate Several Form Elements
• Printing Out the Contents of a Page
• Performing a Live Character Count Down

Notes: This script checks two things on the client-side before the data is passed to the server and checked against the database:

• Checks the email address entered for syntax validity
• Checks the length of the entered password to make sure it's within a certain character length

// JavaScript Document
function validate(form)
{
var returnVal = true;

var emailaddress=form.email.value;
var emailFormat = /^\w(\.?[\w-])*@\w(\.?[\w-])*\.[a-zA-Z]{2,6}(\.[a-zA-Z]{2})?$/i;

var password=form.password.value;

// begin LengthCheck function for email field

// begin email format validation

if (emailaddress.search(emailFormat) == -1)
{
alert("Please specify your email address in the following format: email@emailaddress.com");
returnVal = false;
}


if (password.length < 6 || password.length > 10)

{ // begin LengthCheck function for password fields
returnVal = false;
alert("Your password must contain 6-10 characters. Please retry.");

// clear password input boxes
form.password.value = "";
form.password.focus();
} // end LengthCheck function for password fields

return returnVal;
}

Notes: Using this script you can build an array or a list of form elements to have validated on the client-side. In this case, I am validating the following form fields:

• firstname
• lastname
• email address (A regular express is compared to check the email address syntax.
• street address
• city
• state
• country
• zip code (A length checking function checks to see if the zip code is 5-digits in length. This would not be applicable if you are collecting International customer data.)
• phone

If a form field is left blank the cursor is placed in that text box. This is also known as a cursor.focus behavior. It is highlighted below in yellow.

To make this script active in your form simply add the following line to your form tag.

<form name="CustomerLead" id="CustomerLead" method="post" action="somescript.cgi" onSubmit="return validate(this);">

This line above that is bolded, calls your JavaScript function. In this case, I call my function validate().

// validates form-membershipreview.asp
function validate(form)
{
var returnVal = true;

// declare all form variables
var required = new Array ("firstname", "lastname", "email", "address1", "city", "states", "country", "zipcode", "phone");
var FormElms = form.elements;
var emailaddress = form.email.value;
var emailFormat = /^\w(\.?[\w-])*@\w(\.?[\w-])*\.[a-zA-Z]{2,6}(\.[a-zA-Z]{2})?$/i;
var zip = form.zipcode.value;
var zipFormat = /^\d{5}$/i;

for (var i =0; i<FormElms.length; i++)
{
if(returnVal)
{
for (var j=0; j<required.length; j++)
{
if (FormElms[i].name == required[j] && FormElms[i].value == "")
{
alert("The required field \""+FormElms[i].name+"\" was left blank.");
FormElms[i].focus();
returnVal = false;

// Validate email address format
if (emailaddress.search(emailFormat) == -1)
{
alert("Please specify your email address in the following format: email@emailaddress.com");
returnVal = false;
}

// Validate zipcode format
if (zip.search(zipFormat) == -1)
{
alert("Your zipcode must be 5 digits long. Please correct.");
returnVal = false;
}


break;
}
}
}
}
return returnVal;
}

Notes: This script will send the contents of a page to the printer for printing.

Please keep in mind to have your HTML table scaled to percentages. For example you have a main body content table, having it resize to 80% of the browser would scale it down so that the text on the far right-hand side is not cut off in the printing process.

In order to use this script you will have to create a link on the webpage you desire to print. In this case below I have commented out the referring link HREF="Javascript:PrintContents();"   to this print function. In this case the function is called PrintContents(). This is what you would call when the link is clicked by a user.

// refering link: HREF="Javascript:PrintContents();"
function PrintContents()
{
window.print();
}