function validateForm() { var returnValue = false; var firstName = /^[a-zA-Z]+(([\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$/; var lastName = /^[a-zA-Z]+(([\'\,\.\-][a-zA-Z])?[a-zA-Z]*)*$/; var emailTxt = /^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/; var phoneNumber = /^[1-9]\d{2}-\d{3}-\d{4}$/; var subjectTitle = /^([a-zA-Z '-]+)$/; if(document.contact_us.fname == "") { alert("Please fill in your first name!"); document.contact_us.fname.focus(); } if(!firstName.test(document.contact_us.fname.value)) { alert("Please fill in your first name! Example: John"); document.contact_us.fname.focus(); } if(document.contact_us.lname == "") { alert("Please fill in your last name!"); document.contact_us.lname.focus(); } else if(!lastName.test(document.contact_us.lname.value)) { alert("Please fill in your last name! Example: Smith"); document.contact_us.lname.focus(); } else if(document.contact_us.email == "") { alert("Please fill in your email!"); document.contact_us.email.focus(); } else if(!emailTxt.test(document.contact_us.email.value)) { alert("Please fill in your email! Example: [email protected]"); document.contact_us.email.focus(); } else if(document.contact_us.phone == "") { alert("Please fill in your phone number!"); document.contact_us.phone.focus(); } else if(!phoneNumber.test(document.contact_us.phone.value)) { alert("Please fill in your phone number! Example: 555-555-5555"); document.contact_us.phone.focus(); } else if(document.contact_us.subject == "") { alert("Please fill in a subject title!"); document.contact_us.subject.focus(); } else if(!subjectTitle.test(document.contact_us.subject.value)) { alert("Please fill in a subject title! Example: Computer Question?"); document.contact_us.subject.focus(); } else if(document.contact_us.message == "") { alert("Please leave a message!"); document.contact_us.message.focus(); } else { returnValue = true; } return returnValue; }
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Ticket Form</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="form_validate.js" type="text/javascript"></script> </head> <body> <form name="contact_us" method="post" action="contact_us.html"> <div id="container"> <div id="header"> <a id="logo" title="FTS" href=""> <img border="0" alt="FTS" src="images/Logo1.jpg"> </a> <p style="font-family: 'BadaBoom BB'"> <span></span> TICKET MANAGEMENT SYSTEM </p> </div> <ul id="nav"> </ul> <div id="content"> <div style="font-family:'A.C.M.E. Secret Agent'">Please fill out the form for a ticket number.</div> <table width="90%" cellspacing="1" cellpadding="2" align="left"> <tbody> <tr> <th style="font-family:'A.C.M.E. Secret Agent'" width="20%">First Name:</th> <td> <input type="text" placeholder="First Name" value="" size="25" name="fname"> <font class="error">*</font> </td> </tr> <tr> <th style="font-family:'A.C.M.E. Secret Agent'" width="20%">Last Name:</th> <td> <input type="text" placeholder="Last Name" value="" size="25" name="lname"> <font class="error">*</font> </td> </tr> <tr> <th style="font-family:'A.C.M.E. Secret Agent'" nowrap="">Email Address:</th> <td> <input type="text" placeholder="[email protected]"value="" size="25" name="lemail"> <font class="error">*</font> </td> </tr> <tr> <th style="font-family:'A.C.M.E. Secret Agent'" width="20%">Telephone:</th> <td> <input type="text" placeholder="###-###-####"value="" size="25" name="phone"><font class="error">*</font> <b style="font-family:'A.C.M.E. Secret Agent'">Ext:</b> <input type="text" placeholder="######"value="" size="6" name="phone_ext"> </td> </tr> <tr height="2px"> <td align="left" colspan="2"</td> </tr> <tr> <th style="font-family:'A.C.M.E. Secret Agent'">Service:</th> <td> <select name="service"> <option selected="" value="">Select One</option> <option value="8">FairTech Support</option> <option value="7">Hardware Support</option> <option value="6">Software Support</option> <option value="5">Virus Support</option> <option value="4">Computer Cleaning</option> <option value="3">System Backup & Recovery</option> <option value="2">Full Computer Repair</option> <option value="1">Billing Questions</option> </select> </td> </tr> <tr> <th style="font-family:'A.C.M.E. Secret Agent'">Subject:</th> <td> <input type="text" placeholder="Subject" value="" size="35" name="subject"> <font class="error">*</font> </td> </tr> <tr> <th style="font-family:'A.C.M.E. Secret Agent'" valign="top">Message:</th> <td> <textarea style="width: 500px; height: 210px;" wrap="soft" rows="8" cols="35" name="message"></textarea> </td> </tr> <tr height="2px"> <td align="left" colspan="2"></td> </tr> <tr> <td></td> <td> <input class="button" type="submit" value="Submit" name="submit_n" onclick="return validateForm();"> <input class="button" type="button" value="Cancel" name="cancel"> <input class="button" type="reset" value="Reset" name="reset"> </td> </tr> </tbody> </table> </div> <div id="footer"></div> <div style="font-family:'A.C.M.E. Secret Agent'" align="center"> FairTech Services <em>I.T. Services With A Difference</em> <a id="powered_by" href=""> <img border="0" alt="Powered by FairTech Services" src="images/Logo2.jpg"> </a> </div> </div> </form> </div> </body> </html>