User Prints Validated Form to Send by Snail Mail
If you need users to send you snail mail forms that they've filled out this script will help. Whether you need it snail mail because you need a signature or for some other reason, this script will not only print out the user's input, it will also validate this input. (If you ask the user for a form filled out by hand, you will often get illegible dreck, so a form using a real font will help a lot.) In our case below, we get a user's email address, name, and a product key. We've arbitrarily validated only 19-character input for keys composed of digits and hyphens. You may use other parameters. The script asks for one or more email addresses which it will validate for you. It also validates the user's name. What happens is that if illegal characters are found, the script will not only give a warning message—it will keep the user's cursor on the item with the error until s/he gets it right.
On to the script. After some simple CSS to format the page, the script includes the JavaScript validation code that validates all input. The user may input Joe Blow Jr. the 4th or something else unexpected, so letters, numbers, hyphens and periods are allowed, using a regular expression. The 5 is the least number of characters allowed and the 35 is the most number of characters allowed. The JavaScript search() method returns -1 if no match is found. In our case, we're using code that matches a regular expression with the input string and returns the index of the beginning of the match if found, -1 if not. The latter also pops up the warning message and keeps the user's cursor on the input box with the error using the JavaScript focus() method. The return false code means that the form will not be submitted. Note that in the form tag the action="" and the onsubmit='return printit()' which tells the validation script printit() to submit the form only if the validation passes—and return true is encountered instead of return false. Note that the window.print() method is encountered ONLY if all tests are passed and the input all validates.
The email validator validates one or more emails addresses. The asterisk or star tells the engine to attempt to match the preceding token (in the final parentheses group) zero or more times which in this case refers to optional multiple emails. The plus tells the engine to attempt to match the preceding token (in the first parentheses group) once or more which in this case refers to one required email. The [,] tells the engine to look for a comma between email addresses. Note that [a-zA-Z0-9_\-\.] and then the plus tells the engine to match at least one of those characters in the email. And of course there is a required @. The dot is escaped meaning a literal dot is expected as in .com or .org. The caret ^ matches the position before the first character in the string—so the caret matches the beginning of a line. Similarly, $ matches right after the last character in the string—so it matches the end of a line. The email code once again pops up the warning message and keeps the user's cursor on the input box with the error once again using the JavaScript focus() method. The return false code once again means that the form will not be submitted.
The key validator validates one key only, validating only 19-character input for keys composed of digits and hyphens. The warning message and the focus() method and search() method are used once again, and for the same reasons. The window.print() method prints the contents of the current window. Note that this happens IF all validations pass.
The printing prints the address the user is supposed to send the form to, then the form itself, complete with the user input. The form itself is standard stuff, with an onsubmit() event in the form tag to force the actions of the validation script.
Here is the validated form print script:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<title>validated form print</title>
<style type="text/css">
BODY {margin-left:0; margin-right:0; margin-top:0;text-align:left}
p {font:13px Verdana; color:black;text-align:left;width:700px;margin-left:150px;}
h1 {font:bold 28px Verdana; color:black;text-align:center}
h2 {font:bold 24px Verdana;text-align:center}
#f {margin-left:150px; width:700px; padding:10px; background-color:#cccccc; border:2px solid #000; font:bold 13px Verdana;}
</style>
<SCRIPT LANGUAGE="JavaScript">
function printit(){
var ck_name = /^[0-9A-Za-z-\s\.]{5,35}$/;
if (document.formpw.full.value.search(ck_name)==-1)
{alert("Please only enter 5 to 35 letters, spaces, and hyphens for full name.");document.formpw.full.focus();return false}
var ck_email =/^(([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,6}){1,25})+([,](([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,6}){1,25})+)*$/
if (document.formpw.email.value.search(ck_email)==-1)
{alert("That email address is not valid.");document.formpw.email.focus();return false}
var ck_key = /^[0-9-]{19,19}$/;
if (document.formpw.key.value.search(ck_key)==-1)
{alert("Please enter digits and hyphens for key.");document.formpw.key.focus();return false;}
window.print();return true;}
</script>
</HEAD>
<body>
<p><B><center><h2>Send us your filled out form today and we will (whatever . . . )</h2></B></center></p>
<P>Fill out and then print the form below and send it to us at the address below.<BR><BR>
We will respond appropriately.<BR><BR>
Send to: Company x, po box 12345, NY, NY, 10001.</P>
<form name='formpw' method="post" action="" onsubmit='return printit()'>
<TABLE id='f'>
<caption style='color:red'><b>All fields required</b></caption>
<tr>
<td align=right colSpan=2 width='220'>Full Name: </td>
<TD><INPUT maxLength='35' name='full' size='35'></TD></TR>
<tr>
<td align=right colSpan=2>Product Key: </td>
<TD><INPUT maxLength='19' name='key' size='19'></TD></TR>
<TR>
<TD align=left colspan=3>What <span style='color:red'>email address</span> did you use when you ordered? If you're not sure, you may enter more than one email address. Separate them with commas, please.<BR> </TD></tr>
<TR>
<TD align=right colspan=2>Email: </td>
<td><textarea rows="4" cols="40" name="email"></textarea></TD></tr>
<TR>
<TD align=right colspan=2><BR></TD>
<TD><BR><input type="submit" value="Print this form"><br><BR><BR></TD></TR></TABLE></FORM>
</BODY>
</HTML>