JavaScript - Phone Validation Javascript
Hi,
I have a form on my website and I want to validate the phone field. I found a good script to do it but I need to combine the script with the other validation that I have on my form. Can you help me add this phone validation script into the other validations that I have so that it is just one javascript? Here is the phone validation script: <script language = "Javascript"> /** * DHTML phone number validation script. Courtesy of SmartWebby.com (http://www.smartwebby.com/dhtml/) */ // Declaring required variables var digits = "0123456789"; // non-digit characters which are allowed in phone numbers var phoneNumberDelimiters = "()- "; // characters which are allowed in international phone numbers // (a leading + is OK) var validWorldPhoneChars = phoneNumberDelimiters + "+"; // Minimum no of digits in an international phone no. var minDigitsInIPhoneNumber = 10; function isInteger(s) { var i; for (i = 0; i < s.length; i++) { // Check that current character is number. var c = s.charAt(i); if (((c < "0") || (c > "9"))) return false; } // All characters are numbers. return true; } function trim(s) { var i; var returnString = ""; // Search through string's characters one by one. // If character is not a whitespace, append to returnString. for (i = 0; i < s.length; i++) { // Check that current character isn't whitespace. var c = s.charAt(i); if (c != " ") returnString += c; } return returnString; } function stripCharsInBag(s, bag) { var i; var returnString = ""; // Search through string's characters one by one. // If character is not in bag, append to returnString. for (i = 0; i < s.length; i++) { // Check that current character isn't whitespace. var c = s.charAt(i); if (bag.indexOf(c) == -1) returnString += c; } return returnString; } function checkInternationalPhone(strPhone){ var bracket=3 strPhone=trim(strPhone) if(strPhone.indexOf("+")>1) return false if(strPhone.indexOf("-")!=-1)bracket=bracket+1 if(strPhone.indexOf("(")!=-1 && strPhone.indexOf("(")>bracket)return false var brchr=strPhone.indexOf("(") if(strPhone.indexOf("(")!=-1 && strPhone.charAt(brchr+2)!=")")return false if(strPhone.indexOf("(")==-1 && strPhone.indexOf(")")!=-1)return false s=stripCharsInBag(strPhone,validWorldPhoneChars); return (isInteger(s) && s.length >= minDigitsInIPhoneNumber); } function ValidateForm(){ var Phone=document.frmSample.txtPhone if ((Phone.value==null)||(Phone.value=="")){ alert("Please Enter your Phone Number") Phone.focus() return false } if (checkInternationalPhone(Phone.value)==false){ alert("Please Enter a Valid Phone Number") Phone.value="" Phone.focus() return false } return true } </script> Here are the validations for the other fields: <script type="text/JavaScript"> function validate_form(){ err = 'The following fields are not correct filled:\n'; if (document.form1.name.value == ''){ err += 'No First Name.\n'; } if (document.form1.from.value == ''){ err += 'No Email Address.\n'; } if (document.form1.elements['custom State'].value == ''){ err += 'No State.\n'; } if (document.form1.elements['custom Phone'].value == ''){ err += 'No Phone.\n'; } if (emailCheck(document.form1.from.value) == false){ err += 'No Valid email.\n'; } if (document.form1.terms.checked != true){ err += 'You did not agree with the terms.\n'; } if (err != 'The following fields are not correct filled:\n'){ alert (err); return false; } else{ return true; } } var str_vars = ''; function all_fields(){ str_vars = ''; el = document.form1; for (var i = 0; i < el.elements.length; i++) { if (el.elements[i].value != '') str_vars += el.elements[i].name+'='+el.elements[i].value+'&'; } str_vars = str_vars.substr(0,str_vars.length-15);; } </script> Thank you, Leroy Similar TutorialsNeed Phone Number Validation for my JavaScript, i can't work it out It currently has E-mail, Surname, Address and Name validation, This is my code at the moment: Code: <script language="JavaScript"> function echeck(str) { var at="@" var dot="." var lat=str.indexOf(at) var lstr=str.length var ldot=str.indexOf(dot) if (str.indexOf(at)==-1){ alert("Please Enter a Valid E-mail") return false } if (str.indexOf(at)==-1 || str.indexOf(at)==0 || str.indexOf(at)==lstr){ alert("Please Enter a Valid E-mail") return false } if (str.indexOf(dot)==-1 || str.indexOf(dot)==0 || str.indexOf(dot)==lstr){ alert("Please Enter a Valid E-mail") return false } if (str.indexOf(at,(lat+1))!=-1){ alert("Please Enter a Valid E-mail") return false } if (str.substring(lat-1,lat)==dot || str.substring(lat+1,lat+2)==dot){ alert("Please Enter a Valid E-mail") return false } if (str.indexOf(dot,(lat+2))==-1){ alert("Please Enter a Valid E-mail") return false } if (str.indexOf(" ")!=-1){ alert("Please Enter a Valid E-mail") return false } return true } function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else { return true; } } } function validate_form(thisform) { with (thisform) { if (validate_required(Name,"Name must be filled out!")==false) {Name.focus();return false;} if (validate_required(Surname,"Surname must be filled out!")==false) {Surname.focus();return false;} if (validate_required(Country,"Address must be filled out!")==false) {Country.focus();return false;} } { var emailID=document.submitting.email if ((emailID.value==null)||(emailID.value=="")){ alert("Please Enter a Valid E-mail") emailID.focus() return false } if (echeck(emailID.value)==false){ emailID.value="" emailID.focus() return false } return true } } function verifyEmail(form) { checkEmail = form.email.value if ((checkEmail.indexOf('@') < 0) || ((checkEmail.charAt(checkEmail.length-4) != '.') && (checkEmail.charAt(checkEmail.length-3) != '.'))) {alert("You have entered an invalid email address. Please try again."); form.email.select(); return false; } else { form.method="get"; form.rel="nofollow" target="_self"; form.action="myscript.cgi"; form.submit(); } } </script> Code: <form action="submit.htm" onsubmit="return validate_form(this)" method="post" name="submitting"> <span class="style5">Select Plant: <form id="form1" name="form1" method="post" action=""> <label> <select name="Item" id="Item"> <option>OMGwoopwoop Plant</option> <option>I'm Blue Plant </option> <option>Anonymous Plant</option> <option>Rawr Plant</option> <option>Chicka Plant </option> <option>Fruitopola Plant</option> <option>Whitoe Plant</option> <option>Wukidoo Plant </option> </select> </label> </p> <p>Name:<span class="style1"> <input type="text" name="Name" size="30"> <br> <br> </span>Surname: <span class="style1"> <input type="text" name="Surname" size="30"> <br> <br> </span>Address:<span class="style1"> <input type="text" name="Country" size="30"> <br> <br> </span>Email:<span class="style1"> <input type="text" name="email" size="30"> <br></span></p> Phone Number:<span class="style1"> <input type="text" name="phone" size="30"> <form action="submit.htm" onSubmit="return validate_form(this)" method="post"> <input type="submit" value="Submit"> </form> Hi there, I need to validate three textboxes and it will validate for numbers. How should I change my code to validate three textboxes? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type='text/javascript' language="javascript"> var validPhoneChar = "+"; // Minimum no of digits in an international phone no. var minDigitsInPhoneNumber = 10; function isInteger(s) { var i; for (i = 0; i < s.length; i++) { // Check that current character is a number. var c = s.charAt(i); if (((c < "0") || (c > "9"))) return false; } // All characters are numbers. return true; } function stripCharsInBag(s, bag) { var i; var returnString = ""; // Search through string's characters one by one. // If character is not in bag, append to returnString. for (i = 0; i < s.length; i++) { // Check that current character isn't whitespace. var c = s.charAt(i); if (bag.indexOf(c) == -1) returnString += c; } return returnString; } function checkRequirements(strPhone) { if(strPhone.indexOf("+") > 1) return false; s = stripCharsInBag(strPhone,validPhoneChar); return (isInteger(s) && s.length >= minDigitsInPhoneNumber); } function ValidateForm() { var Phone = document.getElementById("Text1"); //var Phone1 = document.getElementById("Text23"); if ((Phone.value == null)||(Phone.value == "")) //if match failed { alert("Please Enter your Phone Number."); Phone.focus(); return false; } /*if ((Phone1.value == null)||(Phone1.value == "")) //if match failed { alert("Please Enter your Phone Number0."); Phone.focus(); return false; }*/ if (checkRequirements(Phone.value) == false) { alert("Please Enter a Valid Phone Number."); Phone.value = ""; Phone.focus(); return false; } else alert("YAY!"); return true; } function NotAllowSpace() { // Get the ASCII value of the key that the user entered var key = window.event.keyCode; // Verify if the key entered was a Space if ( key == 32 ) { // If it was, then dispose the key and continue with entry window.event.returnValue = null; alert("Invalid,Please check") } else // If it was not, then allow the entry to continue return; } </script> </head> <body> <label>Office Telephone:</label> <input id="Text1" type="text" onkeydown = "return (event.keyCode != 32)"/><br /> <input id="Button1" type="button" value="button" onclick="return ValidateForm();" /><br /> </body> </html> I need to use Javascript to validate 3 textboxes, whereby the users can only key in numbers (because they are phone numbers related fields). If any of the textbox is empty, display an alert message to show which textbox is empty. I do not want to show many alert messages to show that, for example, text1 and text2 are empty, it will show two alert messages. I would need to show one "summarized" alert message instead. Next, check if the textbox matches the pattern (which is to check if it has the skeleton of a phone number). If it is, show an alert message that it is alright. Else, show that it does not match. I have a phone number field on my form that needs validation, but I'm not sure how to code this. I have the following function to validate a first name is entered and last name. The phone number field must match a 7 digit or 10 digit(with area code)phone number. I want to be able to include paranthese and/or hyphens for the valid phone number. function checkForm1() { if (document.forms[0].firstname.value.length == 0) { alert("You must put in a first name"); return false; } else if (document.forms[0].lastname.value.length == 0) { alert("You must put in a last name"); return false; } I need someone to point me in the right direction... I have been tasked with creating a phone directory at work. I found an example that kind of works for what I need he http://www.mollerus.net/development/..._directory.cfm But we have a larger number of employees and I need to be able to sort the directory by first name, last name, or department. Can anyone show me where to go? Is there a download somewhere? I'll post the code below of what we're currently using. It is functional, but not pretty by any means, and needs altered to produce what we need. I don't know JavaScript, this is something I found a couple years ago that suited our purpose, but now it doesn't anymore. The Script: Code: function setUp(info) { var v = document.getElementById('phonesearch').selectedIndex.toString(); var ln, fn, ext; var arr = new Array(); var sel = document.getElementById('phonelist'); for (var i = sel.options.length-1; i >= 0 ; i--) { sel.options[i] = null; } for(i = 0; i < phonelist.length; i++ ) { fn = phonelist[i][0]; ln = phonelist[i][1]; ext= phonelist[i][2]; switch (v) { // case "1" : zo = ln+', '+fn; zv = zo +' : '+ext; break; case "2" : zo = fn+' '+ln; zv = zo +' : '+ext; break; case "3" : zo = ext+' : '+ln+', '+fn; zv = zo; break; default: zo = ln+', '+fn; zv = zo +' : '+ext; break; } if (info != '') { if (zo.toUpperCase().indexOf(info.toUpperCase(),0) == 0) { arr.push(zo+'||'+zv); } } else { arr.push(zo+'||'+zv); } } arr.sort(); // Like the original order, comment out this line! var z = []; for (i=0; i<arr.length; i++) { z = arr[i].split('||'); sel.options[i] = new Option(z[0],z[1],false,false); } var z = 13; if (phonelist.length < z) { z = phonelist.length; } sel.size = z; if (info == '') { sel.focus(); } } The Form Code: <form name="menuform" onSubmit="return false"> <p class="style1">Select to search by first name, last name, or extension. Then click in the text box on the bottom and type in the first few letters of who/what it is you're looking for.</p> <p class="style1">Then, simply click the entry you need.</p> <select id="phonesearch" onchange="setUp('')" size="4"> <option value=""><i>Choose one</i></option> <option value="1">Last name</option> <option value="2" selected>First name</option> <option value="3">Extension</option> </select> <br /><br /> <select id="phonelist" onclick="alert(this.value)"></select> <br /><br /> <input type="text" id="srch" value="" onkeyup="setUp(this.value)" size="20"> <br /><a href="#" onclick="sel=document.getElementById('srch');sel.value='';setUp('');sel.focus()">Search Clear</a> </form> Hi there, I would like to allow the "+" sign in my 3 textboxes. When the user does not put the "+" sign in the textboxes, and it is being validated, the system will allow it to pass. Also, it must check that it has at least 8 digits. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <link rel="stylesheet" type="text/css" href="CSS files/specialAlignment.css" /> <link rel="stylesheet" type="text/css" href="CSS files/externalCSS.css"/> <script language = "javascript" type = "text/javascript"> function check() { var fields = new Array("Office Telephone", "Mobile Telephone","Fax Number"); var telnr = /(^[\+]?[\d]{8,20}$)/; var index = new Array(); for(var i = 0; i < fields.length; i++) { var arrayFields = document.getElementsByName(fields[i]); for(var j = 0; j < arrayFields.length; j++) if(!(arrayFields[j].value) == "") { arrayFields[j].className = "defaultColor"; } else { arrayFields[j].className ="changeToRed"; index.push(fields[i]); } } if(index != 0) { joinComma = index.join(', '); alert('The field(s) corresponding to '+ joinComma + ' is/are not filled in.'); } } function noSpace(e, dec) { var key; var keychar; if (window.event) { key = window.event.keyCode; } else if (e) { key = e.which; } else { return true; } keychar = String.fromCharCode(key); if ((key==null) || (key==0) || (key==8) || (key==9) || (key==13) || (key==27) /*|| (key==107)*/) { return true; } else if ((("0123456789").indexOf(keychar) > -1)&& check(telnr.test(tfld))) { return true; } else if (dec && (keychar == ".")) { return true; } else return false; } </script> </head> <body> <label> *Office Telephone:</label> <input id="Text16" type="text" name="Office Telephone" onkeydown="return noSpace(event)" /> <br /> <br /> <label> *Mobile Telephone:</label> <input id="Text17" type="text" name="Mobile Telephone" onkeydown="return noSpace(event)" /><br /> <br /> <label> *Fax Number:</label> <input id="Text18" type="text" name="Fax Number" onkeydown="return noSpace(event)" /> <br /> <br /> <input id="Submit17" type="submit" value="Submit" onclick="return check()"/> </body> </html> 1.I want to retain the value of the item selected from the drop down list even if the validation fails 2. The input element should be hghlighted red in colour which fails the validation <html> <script type="text/javascript"> <!-- function validate_form1 ( ) { valid = true; if ( document.contact_form1.question1.value=="" || document.contact_form1.question2.value == "" ) { alert ( "Select at least one option." ); //document.getElementById("question1").focus(); document.getElementById('contact_form1').question1.focus(); valid = false; } return valid; } function validate_form2 ( ) { valid = true; if ( document.contact_form2.question1.value=="" || document.contact_form2.question2.value == "" ) { alert ( "Select at least one option." ); //document.getElementById("question1").focus(); valid = false; } return valid; } //--> </script> <table border="5" width="300"> <tr> <td> <form name="contact_form1" action="DBsaving.php" method="post" onSubmit="return validate_form1 ( );"> 1. Question <select name="question1"><option selected="q1" value="">Select One...</option><option value="1">Yes</option><option value="2">No</option></select><br /><br /> 2. Question <select name="question2"><option selected="selected" value="">Select One...</option><option value="1">Yes</option><option value="2">No</option></select><br /><br /> 3. Faculty ID : <textarea name="comments" rows="2" cols="4"></textarea> <input type="submit" value="Submit" /> </form> </td> <td> <form name="contact_form2" action="DBsaving.php" method="post" onSubmit="return validate_form2 ( );" > 1. Question <select name="question1"><option selected="q1" value="">Select One...</option><option value="yes1">Yes</option><option value="no1">No</option></select><br /><br /> 2. Question <select name="question2"><option selected="selected" value="">Select One...</option><option value="yes">Yes</option><option value="no">No</option></select><br /><br /> 3. Faculty ID : <textarea name="comments" rows="2" cols="4"></textarea> <input type="submit" value="Submit" /> </form> </td> </tr> </table> </html> I am new to this forum.. and I am hoping to get help with this javascript validation for my form for my assignment. trying to validate multiple fields. I have never done javascript, so with my limited understanding from Google, I put together code snippets. Problems: 1. How can I get one message box when the user presses submit indicating all failed validation at one time 2. The expired credit card validation doesnt work 3. Cant seem to find a good "confirm password" script 3. The form does not submit if all the fields are correct. <script language="javascript"> <!-- function checkAge() { var bday=parseInt(document.forms[0].txtBday.value); var bmo=(parseInt(document.forms[0].txtBmo.value)-1); var byr=parseInt(document.forms[0].txtByr.value); var byr; var age; var now = new Date(); tday=now.getDate(); tmo=(now.getMonth()); tyr=(now.getFullYear()); { if((tmo > bmo)||(tmo==bmo & tday>=bday)) { age=(tyr-byr) } else { age=(tyr-(byr+1)) } if (age<18) { alert ("you must be over 18 years"); return false; } else { return true; } } } //--> function checkEmail() { var x=document.getElementById("email").value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; } { return true; } } function onlyNumbers(evt) { var e = event || evt; // for trans-browser compatibility var charCode = e.which || e.keyCode; if (charCode > 31 && (charCode < 48 || charCode > 57)) return false; { return true; } } function checkCardNumber() { var x = document.getElementById("cardNumber").value; if (x.length<16) { alert("Your Credit Card Number must be 16 digits"); return false; } { return true; } } function checkSecurityCode() { var y = document.getElementById("securityCode").value; if (y.length<3) { alert("Your Security number must be three digits"); return false; } { return true; } } function ValidateExpDate() { var ccExpYear = 20 + $F('<%= expYear.ClientID%>'); var ccExpMonth = $F('<%= expMonth.ClientID%>'); var expDate=new Date(); expDate.setFullYear(ccExpYear, ccExpMonth, 1); var today = new Date(); if (expDate<today) { alert("card expired"); // Credit Card is expire return false; } else { // Credit is valid return true; } } function runall() { checkAge(); checkEmail(); checkCardNumber(); checkSecurityCode(); { return false;} } </script> for some reason this is not working can anyone tell me why? Code: <script language="JavaScript" type="text/javascript"> function swap(nam,im) { eval("document." + nam + ".src=" + im + ".src"); } van_b = new Image; van_b.src = "images/bus_menu2/busmenub_Passvan01on.jpg"; van_a = new Image; van_a.src = "images/bus_menu2/busmenub_Passvan01off.jpg"; excoach_b = new Image; excoach_b.src = "images/bus_menu2/busmenuB_Excoach01on.jpg"; excoach_a = new Image; excoach_a.src = "images/bus_menu2/busmenuB_Excoach01off.jpg"; specialcoach_b = new Image; specialcoach_b.src = "images/bus_menu/busmenu_specialtycoach01on.jpg"; specialcoach_a = new Image; specialcoach_a.src = "images/bus_menu/busmenu_specialtycoach01off.jpg"; minicoach_b = new Image; minicoach_b.src = "images/bus_menu2/busmenuB_minicoach01on.jpg"; minicoach_a = new Image; minicoach_a.src = "images/bus_menu2/busmenuB_minicoach01off.jpg"; motorcoach_b = new Image; motorcoach_b.src = "images/bus_menu2/busmenub_motorcoach01on.jpg"; motorcoach_a = new Image; motorcoach_a.src = "images/bus_menu2/busmenub_motorcoach01off.jpg"; function checkForm() { frm = window.document.contactForm; if (frm.pickupmonth.value =='') { alert('Please enter valid pickup Month'); frm.pickupmonth.focus(); return false; } if(frm.pickupday.value== "") { alert('Please enter pickup Day'); frm.pickupday.focus(); return false; } if(frm.pickupyear.value == "") { alert('Please enter pickup Year'); frm.pickupyear.focus(); return false; } if(frm.pickupaddress.value == "") { alert('Please enter pickup Address'); frm.pickupaddress.focus(); return false; } if (frm.pickupcity.value== "") { alert('Please enter pickup City'); frm.pickupcity.focus(); return false; } if (!validateInt(frm.pickupzip.value)) { if(frm.pickupzip.value =="" ) alert('Please enter pickup Zip Code'); frm.pickupzip.value=""; frm.pickupzip.focus(); return false; } if(frm.pickuphour.value == "") { alert('Please enter pickup Hour'); frm.pickuphour.focus(); return false; } if(frm.pickupminute.value == "") { alert('Please enter pickup Minute'); frm.pickupminute.focus(); return false; } if(frm.pickupam.value == "") { alert('Please enter pickup AM or PM'); frm.pickupam.focus(); return false; } if(frm.dropoffaddress.value == "") { alert('Please enter dropoff Address'); frm.dropoffaddress.focus(); return false; } if(frm.dropoffcity.value == "") { alert('Please enter dropoff City'); frm.dropoffcity.focus(); return false; } if (!validateInt(frm.dropoffpzip.value)) { if(frm.dropoffpzip.value =="" ) alert('Please enter a valid dropoff Zip Code'); frm.dropoffpzip.value=""; frm.dropoffpzip.focus(); return false; } if(frm.arrivalhour.value == "") { alert('Please enter arrival Hour'); contactForm.arrivalhour.focus(); return false; } if(frm.arrivalmin.value == "") { alert('Please enter arrival Minute'); frm.arrivalmin.focus(); return false; } if(frm.arrivalam.value == "") { alert('Please enter arrival AM or PM'); frm.arrivalam.focus(); return false; } if(frm.vehicle.value == "") { alert('Please enter Vehicle Type'); frm.vehicle.focus(); return false; } if(frm.passengers.value == "") { alert('Please enter Amount of Passengers'); frm.passengers.focus(); return false; } if(frm.guestname.value == "") { alert('Please enter Name'); frm.guestname.focus(); return false; } if (!validateInt(frm.guestphone.value)) { if(frm.guestphone.value =="" ) alert('Please enter a valid Telephone number'); frm.guestphone.value=""; frm.cguestphone.focus(); return false; } if(!validateEmail(frm.guestemail.value) { alert('Please enter proper email address!'); frm.guestemail.focus(); return false; } function validateInt(val) { switch (isInteger(val)) { case true: return true; break; case false: alert("Please enter numbers only!"); return false; } } function isInteger (s) { var i; if (isEmpty(s)) if (isInteger.arguments.length == 1) return 0; else return (isInteger.arguments[1] == true); for (i = 0; i < s.length; i++) { var c = s.charAt(i); if (!isDigit(c)) return false; } return true; } function isEmpty(s) { return ((s == null) || (s.length == 0)) } function isDigit (c) { return ((c >= "0") && (c <= "9")) } function validateEmail(email){ // This function is used to validate a given e-mail // address for the proper syntax if (email == ""){ return false; } badStuff = ";:/,' \"\\"; for (i=0; i<badStuff.length; i++){ badCheck = badStuff.charAt(i) if (email.indexOf(badCheck,0) != -1){ return false; } } posOfAtSign = email.indexOf("@",1) if (posOfAtSign == -1){ return false; } if (email.indexOf("@",posOfAtSign+1) != -1){ return false; } posOfPeriod = email.indexOf(".", posOfAtSign) if (posOfPeriod == -1){ return false; } if (posOfPeriod+2 > email.length){ return false; } return true } </script> I have a validation issue. I need the input fields to highlight yellow if no text has been entered and when the form is submitted the error message displays to check the highlighted fields. I get the input boxes to highlight when there is no text but on submit the form goes to the next page without the error alert message. Any suggestions would be appreciated. My HTML page: Code: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Filename: works.htm Supporting files: --> <!-- #BeginEditable "doctitle" --> <title>Wizard Works Order Form</title> <!-- #EndEditable --> <link href="ww.css" rel="stylesheet" type="text/css" /> <script src="functions.js" type="text/javascript"></script> <script src="valid.js" type="text/javascript"></script> </head> <body> <form id="order" action="file:///F:/JavaScript/case4/done.htm" onsubmit="return validateForm()" method="post"> <div id="page"> <div id="head"> <img alt="Wizard Works" src="logo.jpg" /> </div> <ul id="links"> <li><a href="#">Home</a></li> <li><a href="#">Assortments</a></li> <li><a href="#">Firecrackers</a></li> <li><a href="#">Fontains</a></li> <li><a href="#">Cones</a></li> <li><a href="#">Rockets</a></li> <li><a href="#">Sparklers</a></li> <li><a href="#">Online Store</a></li> <li><a href="#">Shopping Cart</a></li> <li><a href="#">Your Account</a></li> <li><a href="#">Safety</a></li> <li><a href="#">Tech Support</a></li> <li><a href="#">Customer Service</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> <div id="webform"> <fieldset id="purchase"> <legend>Order</legend> <label id="produtLab" class="required" for="product">1) Product</label> <select id="product"> <option value="">Select a Product</option> <option value="3.5">Green/Purple Fountain: $3.50 ea.</option> <option value="4.95">Silver Cone: $4.95 ea.</option> <option value="6.95">Glitter Cone: $6.95 ea.</option> <option value="9.95">Glittering Stars: $9.95 ea.</option> <option value="19.95">Fountain Kit: $19.95 ea.</option> <option value="29.95">Fountain Kit Deluxe: $29.95</option> <option value="39.95">Giant Fountain: $39.95</option> </select> <br /> <label id="qtyLab" class="required" for="qty">2) Quantity</label> <select id="qty"> <option value="">Select a Quantity</option> <option value="1"> 1</option> <option value="2"> 2</option> <option value="3"> 3</option> <option value="4"> 4</option> <option value="5"> 5</option> <option value="6"> 6</option> <option value="7"> 7</option> <option value="8"> 8</option> <option value="9"> 9</option> <option value="10">10</option> </select> <br /> <label id="shippingLab" class="required" for="shipping">2) Shipping</label> <select id="shipping"> <option value="">Select a Shipping Option</option> <option value="4.95">Standard ($4.95)</option> <option value="8.95">Express ($8.95)</option> <option value="12.95">Next Day ($12.95)</option> </select> <br /> <label id="totalLab" for="total">3) Total Calculated Cost</label> <input id="total" readonly="readonly" size="20" type="text" /> </fieldset> <fieldset id="contact"> <legend>Contact Information</legend> <label id="fnameLab" class="required" for="fname">4) First Name</label> <input id="fname" size="20" type="text" class="validate" onblur="changeColor(this)" /> <br /> <label id="lnameLab" class="required" for="lname">5) Last Name</label> <input id="lname" size="20" type="text" onblur="changeColor(this)" /> <br /> <label id="addressLab" class="required" for="address">6) Address</label> <textarea id="address" cols="20" rows="5"onblur="changeColor(this)" ></textarea> <br /> <label id="phoneLab" class="required" for="phone">7) Phone (nnn) nnn - nnnn</label> <input id="phone" size="20" type="text" onblur="changeColor(this)" /> </fieldset> <fieldset id="credit"> <legend>Payment Information</legend> <label for="ccard">8) Credit Card</label> <select id="ccard"> <option value="ae">American Express</option> <option value="dc">Diners Club</option> <option value="disc">Discover</option> <option value="mc">MasterCard</option> <option value="visa">Visa</option> </select> <br /> <label id="cholderLab" class="required" for="cholder">9) Card Holder</label> <input id="cholder" size="20" type="text"onblur="changeColor(this)" /> <br /> <label id="cnumLab" class="required" for="cnum">10) Card Number</label> <input id="cnum" size="20" type="text"onblur="changeColor(this)" /> <br /> <label class="required">11) Expiration Date</label> <select id="cmonth" name="cmonth"> <option>01</option><option>02</option><option>03</option> <option>04</option><option>05</option><option>06</option> <option>07</option><option>08</option><option>09</option> <option>10</option><option>11</option><option>12</option> </select> / <select id="cyear" name="cyear"> <option>2010</option><option>2011</option><option>2012</option> <option>2013</option><option>2014</option><option>2015</option> </select> </fieldset> <input id="sbutton" type="submit" value="Submit Order" onclick="returm validateForm();return false;"/> </div> </div> </form> </body> </html> My valid.js code: Code: /* Functions List: initForm() Initiates the Web form for use by the customer calcCost() Calculates the cost of the customer order validLengths() Validates that empty values have been entered for required fields testLength(field) Tests the length of the text string in the specified field validPatterns() Validates that the field values match their regular expressions testPattern(field, reg) Tests a text string against a specified regular expression validCNum() Tests that the specified credit card number passes the Luhn formula validateForm() Performs a validation test on all of the fields in the form */ window.onload = initForm; var wform; var productIndex = 1; var qtyIndex = 1; var shipIndex = 1; function initForm() { wform = document.forms[0]; wform.product.onchange = calcCost; wform.qty.onchange = calcCost; wform.shipping.onchange = calcCost; wform.onsubmit = validateForm; } function calcCost() { productIndex = wform.product.selectedIndex; productCost = parseFloat(wform.product.options[productIndex].value); qtyIndex = wform.qty.selectedIndex; qtyVal = parseFloat(wform.qty.options[qtyIndex].value); shipIndex = wform.shipping.selectedIndex; shipVal = parseFloat(wform.shipping.options[shipIndex].value); if (productIndex != 0 && qtyIndex != 0 && shipIndex != 0) { wform.total.value = "$"+(productCost*qtyVal+shipVal).toFixed(2); } } function validLengths() { var isValid = true; if (testLength(wform.total)== false) isValid = false; if (testLength(wform.fname)== false) isValid = false; if (testLength(wform.lname)== false) isValid=false; if (testLength(wform.address)== false) isValid=false; if (testLength(wform.phone)== false) isValid=false; if (testLength(wform.cholder)== false) isValid=false; if (testLength(wform.cnum)== false) isValid=false; return isValid; } function testLength(field) { var isValid = true; if (field.value.length == 0) { document.getElementById(field.id+"contact").style.bgcolor="yellow"; isValid = false; } else { document.getElementById(field.id+"contact").style.bgcolor="white"; } return isValid; } function validPatterns() { var isValid = true; phonereg = /^\(?\d{3}[\)-]?\s?\d{3}[\s-]?\d{4}$/; if (testPattern(wform.phone, phonereg) == false) isValid = false; creditType = wform.ccard.selectedIndex; switch (creditType) { case 0: cregx = /^3[47]\d{13}$/; break; case 1: cregx = /^30[0-5]\d{11}$|^3[68]\d{12}$/; break; case 2: cregx = /^6011\d{12}$/; break; case 3: cregx = /^5[1-5]\d{14}$/; break; case 4: cregx = /^4(\d{12}|\d{15})$/; break; } if (testPattern(wform.cnum, cregx) == false) isValid = false; return isValid; } function testPattern(field, reg) { var isValid = true; wsregx = /\s/g; var fv =field.value.replace(wsregx,""); if (reg.test(fv) == false) { isValid = false; document.getElementById(input.id+"fname").style.bgcolor="yellow"; } else { document.getElementById(input.id+"fname").style.bgcolor="white"; } return isValid; } function validCNum() { var isValid = true; wsregx = /\s/g; var fv = wform.cnum.value.replace(wsregx,""); if (luhn(fv)==false) { isValid = false; document.getElementById("cnum").style.bgcolor="yellow"; } else { document.getElementById("cnum").style.bgcolor="white"; } return isValid; } function changeColor(field) { var fv = field.value; if (fv.length==0) { field.style.background="yellow"; } else { field.style.background="white"; } } function validateForm() { var vLengths = validLengths(); var vPatterns = validPatterns(); var vCNum = validCNum(); var vForm = vLengths && vPatterns && vCNum; if (!vForm) { alert("Check the highlighted items in the form for missing/invalid data"); return false; } else { return true; } } Hi, validation for pin must not be allow given below conditions 6 rising consecutive numbers(e.g 123456,456789 etc) 6 Descending consecutive numbers (eg. 654321,987654) All same digit (eg 111111,222222) Same digit appearing 3 or more time in pin code (eg:121212,1111432) Hi. I am trying to do some sim[ple form validation using javascript. I have a simple html file Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Send Card</title> <script language="JavaScript" src="gen_validatorv31.js" type="text/javascript"></script> </head> <body> <form action="getName.php" onsubmit="return validate_form(this);"> Receiver (To): <input type="text" name="name"><br> Sender (From): <input type="text" name="sender"><br> Email: <input type="text" name="email"><br> <input type="submit" value="Submit"> </form> </body> </html> Which calls up my javascript and php file (The php file should only be used when the javascript has found no errors). Now I have a js file which does some validation Code: <script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") { alert(alerttxt); return false; } else { return true; } } } function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@") dotpos=value.lastIndexOf(".") if (apos<1||dotpos-apos<2) { alert(alerttxt); return false; } else { return true; } } } function validate_form(thisform) { with (thisform) { if (validate_required(name,"Please specify your name!")==false) { name.focus(); return false; } if (validate_required(sender,"Please specify the receivers name!")==false) { sender.focus(); return false; } if (validate_required(email,"Email must be filled out!")==false) { email.focus(); return false; } if (validate_email(email,"Not a valid e-mail address!")==false) { email.focus(); return false; } } } </script> When I run it on my server, I get the form and enter nothing into it, I just click submit. However, it goes straight to the php file and brings up my flash movie, which it shouldnt do. When nothing is entered, the js file should return the error. I thought I had everything set up correctly, but obviously not. Can someone see where I am going wrong? cheers Hello Every1 I need to edit the below form to use JavaScript to Validate if thr Title was put or Not .. its a template i use at my site to add comment and i want the Title to be Requier .Javascript seems the easiest way for me but dont know how. PHP Code: <{if $commentany.com_itemid}> <form action="comment_post.php" method="POST"> <input type="hidden" name="com_itemid" value="<{$commentany.com_itemid}>"> <input type="hidden" name="XOOPS_TOKEN_REQUEST" value="<{$commentany.xoops_token_request}>"> <table class='outer' cellspacing='1' style="margin-top:2em;"> <tr> <th colspan="2"><{$smarty.const._MB_COMMENTANY_LANG_NEW_COMMENT}></th> </tr> <{* <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_RULE}></td> <td class='odd' align='left'> <{$commentany.rule_text}> </td> </tr> *}> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_ICON}></td> <td class='odd' align='left'> <{foreach item=i from=$commentany.com_icon}> <input type="radio" name="com_icon" value="<{$i}>"><img src="<{$smarty.const.XOOPS_URL}>/images/subject/<{$i}>"> <{/foreach}> </td> </tr> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_TITLE}></td> <td class='odd' align='left'> <input type="text" name="com_title" size="64" maxlength="255" value="<{$xoops_default_comment_title}>"> </td> </tr> <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_TEXT}></td> <td class='odd' align='left'> <{xoopsdhtmltarea name="com_text" cols=50 rows=4}> </td> </tr> <{* <tr> <td class='head' align='left'><{$smarty.const._MB_COMMENTANY_LANG_OPTION}></td> <td class='odd' align='left'> <input type="checkbox" name="dosmiley" value="1" checked><{$smarty.const._CM_DOSMILEY}><br/> <input type="checkbox" name="doxcode" value="1" checked><{$smarty.const._CM_DOXCODE}><br/> <input type="checkbox" name="dobr" value="1" checked><{$smarty.const._CM_DOAUTOWRAP}><br/> </td> </tr> *}> <tr> <td class='head' align='left'></td> <td class='even' align='left'> <input type='submit' class='formButton' name='com_dopreview' id='com_dopreview' value='<{$smarty.const._MB_COMMENTANY_LANG_PREVIEW}>' /> <input type='submit' class='formButton' name='com_dopost' id='com_dopost' value='<{$smarty.const._MB_COMMENTANY_LANG_SUBMIT}>' /> </td> </tr> </table> <input type="hidden" name="dohtml" value="0" /> <input type="hidden" name="dosmiley" value="1" /> <input type="hidden" name="doxcode" value="1" /> <input type="hidden" name="dobr" value="1" /> </form> <{/if}> <{$commentsnav|replace:'button':'hidden'}> Hi guys, just need help so when there is no input into card number, postcode, what are you after, delivery address an error message comes up. Also I need to make it so when someone puts numbers in the first and last name or letters in the postcode it will come up error. I have done this for first and lastname but when I copy my code and try and put it on the others then no javascript works. thanks for your help Code: <html> <head> <script type="text/javascript"> function validate() { var at=document.getElementById("email").value.indexOf("@"); var age=document.getElementById("age").value; var fname=document.getElementById("fname").value; var lname=document.getElementById("lname").value; var ccn=document.getElementById("ccn").value; submitOK="true"; if (fname.length<1) { alert("Please Enter a Valid First Name"); submitOK="false"; } if (isNaN(age)||age<1||age>100) { alert("Age Must be between 1 and 100"); submitOK="false"; } if (lname.length<1) { alert("Please Enter a Last Name"); submitOK="false"; } if (isNaN(age)||age<1||age>100) { alert("Age Must be between 1 and 100"); submitOK="false"; } if (at==-1) { alert("Not a Valid Email Address"); submitOK="false"; } if (submitOK=="false") { return false; if (ccn.length>16) { alert("Credit Card Number is False"); submitOK="false"; } } } </script> </head> <body> <form action="tryjs_submitpage.htm" onsubmit="return validate()"> Name : <input type="text" id="fname" size="20"><br /> Last Name : <input type="text" id="lname" size="20"><br /> Age: <input type="text" size="2" id="age" maxlength="2"> Email: <input type="text" id="email" size="20"><br /> <table><tr> <td><p>Type of Card</p></td> <td><form action="21"> <select name="cars"> <option value="season"> </option> <option value="season">Mastercard</option> <option value="season">Diners Club</option> <option value="season">Visa</option> </select></form></td></tr> </table> <table><tr> <td><p>Expiry Date</p></td> <td><form action="21"> <select name="cars"> <option value="season"> </option> <option value="season">2010</option> <option value="season">2011</option> <option value="season">2012</option> </select></form></td></tr> </table> Card Number : <input type="text" id="ccn" size="20"><br /> Postcode: <input type="text" size="2" id="postcode" maxlength="4"> Delivery Address: <input type="text" id="da" size="20"><br /> Suburb: <input type="text" id="suburb" size="10"><br /> <table><tr> <td><p>What are you after</p></td> <td><form action="21"> <select name="cars"> <option value="poker products"> </option> <option value="poker chips">Poker Table</option> <option value="poker table">Poker Chips</option> <option value="poker table">Both</option> </select></form></td></tr> </table> <input type="submit" value="Submit"> </form> </body> </html> Hello, I have just started learning JavaScript, so I do not know much about it at this moment. I need some help regarding validation of input values which are actually in an array. Okay, my HTML looks like this: Code: Link# 1: <input name="url[]" size="80" type="text"> Title# 1:<input name="title[]" size="80" type="text"> Link# 2: <input name="url[]" size="80" type="text"> Title# 2:<input name="title[]" size="80" type="text"> Link# 3: <input name="url[]" size="80" type="text"> Title# 3:<input name="title[]" size="80" type="text"> . . . . . And so on. (up to 20) User can add more input fields by adding "Add" button; I'm using JavaScript for that purpose. By default, only a couple of fields is shown. I want to validate these all fields using a loop or a number of loops, such that an alert appears if any field is left blank and also if any value in title[] array matches another value in that array and same for the second array url[] Examples of working would be something like this: Code: If Link# 1 is left blank: alert("Link# 1 is empty"); or If Link# 2 is left blank: alert("Link# 2 is empty"); or If Title# 1 is left blank: alert("Title# 1 is empty"); or If Title# 2 is left blank: alert("Title# 2 is empty"); or If Link# 1 == Link# 2: alert("Link# 1 is same as Link#2"); or If Link# 1 == Link# 3: alert("Link# 1 is same as Link#2"); or If Title# 1 == Title# 3: alert("Title# 1 is same as Title#3"); etc, etc. Any help would be appreciated. Thank you. Hi Folks, I'm new here, as well as to JavaScript, and am stuck. I'm trying to get something to validate using the W3C file validation, and I'm stuck. This is XHTML 1.0 Strick, and I know that isn't JS, but since the error involved JS I posted it here. If I would be better putting it in HTML please let me know. Everything works fine on the page, but I keep getting one single error. The > in Red is what shows up as the issue. Do ya'll see something glaringly obvious that I did wrong? Thanks for the help! Code: document.write("<a href='mailto:" + emLink + "' > "); Hello Everyone. And thank you for your help in advance. The code below is a basic HTML form that utilizes some javascript validation and CSS styling. It checks to see if the textbox field Is EMPTY. If it is an alert box appears displaying a message that the e-mail field is BLANK. In addition, the empty text box field is outlined in RED. That is great but I ALSO require it to perform some e-mail validation (i.e.) if an incorrect e-mail address is entered an alert box is displayed notifying the user of the error and outlining the text-box yet again. Any and ALL help would be nice. "Thank you." <html> <head> <title>Validation</title> <style type="text/css"> .inpBox { background-color: #FFFFFF; border: solid 2px #666666; } .inpBoxError { border: solid 4px #FF0000; } </style> <script type="text/javascript"> function verify_login(form_id,email) { var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; var login_email = document.getElementById("email"); var msg = ""; if (login_email.value == "") { msg+= "Email address field cannot be left BLANK \n"; login_email.className = "inpBoxError"; } if (msg == "") { return true; } else { alert(msg); return false; } } </script> </head> <hody> <form id="form_id" method="POST" action="" onSubmit="return verify_login(form_id,email);"> <table border="1" width="30%"> <tr> <td width="15%"><div align="right"><b>E-Mail:</b></td> <td width="15%"><div align="left"><input id="email" name="email" type="text"></td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td colspan="2"><div align="center"><input id="submit" name="submit" type="submit" value="Register"></div></td> </tr> <table> </form> </hody> </html> Hello Everyone I am new on java script and I want to check the form blank text fields by using onChange event. Please guide me, is it possible or not....If possible then please send me the code. MY EMAILID IS dhiman.anurag1@gmail.com ........ THANK YOU hi friends, I have a question with me is javascript is the effective one to do validation? And how it can be used for validation purposes.. Hello I need some help with validating the password strength of my form. I am actually looking for a regular expression that could force the users to have at least 2 of the following: 1. Upper and lower case. 2. Numbers 3. Symbols. Thanks in advance for any help I have a form validation script that runs perfect. Now i want to add one more field to the form and want to make some fields "required" but i dont know how to do this. Please help me. I am also attaching the relevant files. Thanks in advance. Fields to add: 1. Social Security Number (Same as Home Telephone but allows 3 digits in 1st field, 2 in 2nd and 4in 3rd field (123)-(12)-(1234)) Fields to make "required" : Social Security Number First Name Last Name The Script Code: var phoneRegEx = /^(?:(?:\(?(?:(?:[246-8](?:(?:[02-8][0-9])|(?:1[02-9])))|(?:3(?:(?:[02-68][0-9])|(?:1[02-9])))|(?:5(?:(?:[02-46-8][0-9])|(?:5[0-46-9])|(?:1[02-9])))|(?:9(?:(?:[02-578][0-9])|(?:1[02-9]))))\)?)(?:[\- ]?)(?:(?:700(?:[\- ]?)(?:(?:[0-35-9][0-9]{3})|(?:4[02-9][0-9]{2})|(?:41[0-35-9][0-9])|(?:414[02-9])))|(?:(?:(?:[23468][02-9][0-9])|(?:[2-9]1[02-9])|(?:5(?:(?:5[0-46-9])|(?:[02346-9][0-9])|(?:1[02-9])))|(?:7(?:(?:[2-9][0-9])|(?:0[1-9])|(?:1[02-9])))|(?:9(?:(?:[0234689][0-9])|(?:1[02-9])|(?:5[1-7])|(?:7[0-5789]))))(?:[\- ]?)(?:[0-9]{4}))))$/; var error // used to store RowNames for errored elements. var isOptRequired = false; function ValidateQuoteRequest(frm) { if(isBrowserCompatible()) { error = new Array(); CheckDropDown('state', 'row_state', frm); CheckDropDown('Month', 'row_date', frm); CheckDropDown('Day', 'row_date', frm); CheckDropDown('Year', 'row_date', frm); CheckDate('Month', 'Day','Year', 'row_date', frm, 'True'); CheckDropDown('Sex', 'row_sex', frm); CheckDropDown('Height_Feet', 'row_Height', frm); CheckDropDown('Height_Inches', 'row_Height', frm); CheckIntegerField('Weight', 'row_Height', frm, 'True'); CheckDropDown('Tobacco', 'row_tobacco', frm); CheckFrequency('Frequency', 'row_tobaccotype', frm, 'True'); CheckPhone('workphone,homephone', 'row_workphone,row_homephone', frm, 'False'); CheckEmail('email', 'row_email', frm, 'False'); if (error.length > 0) { //turn on error header and scroll page to error header document.getElementById("contentError").style.display = ""; location = '#contentError'; return false; } else { document.getElementById("contentError").style.display = "none"; return true; } } else //browser not compatible { return true; } } function ValidateRequestApplication(frm) { if(isBrowserCompatible()) { error = new Array(); CheckTextField('firstname', 'row_firstname', frm,); CheckTextField('lastname', 'row_lastname', frm); CheckTextField('address', 'row_address', frm); CheckTextField('city', 'row_city', frm); CheckTextField('state', 'row_state', frm); CheckZip('zip', 'row_state', frm, 'True'); CheckPhone('work_phone_number_,home_phone_number_,cell_phone_number_', 'row_work_phone_number_,row_home_phone_number_,row_cell_phone_number_', frm, 'True'); CheckNumericField('work_phone_number_4', 'row_work_phone_number_', frm, 'False'); CheckEmail('email', 'row_email', frm, 'True'); CheckDropDown('premium_quoted', 'row_premium_quoted', frm); CheckRadioButton('Residency', 'row_Residency', frm); CheckRadioButton('spouse_policy', 'row_spouse_policy', frm); CheckSpouseTextField('spouse_first_name', 'row_spouse_first_name', frm); CheckSpouseTextField('spouse_last_name', 'row_spouse_last_name', frm); CheckDropDown('AgentID', 'row_AgentID', frm); if (error.length > 0) { //turn on error header and scroll page to error header document.getElementById("contentError").style.display = ""; location = '#contentError'; return false; } else { document.getElementById("contentError").style.display = "none"; return true; } } else //browser not compatible { return true; } } function ValidateRBCRequestApplication(frm) { if(isBrowserCompatible()) { error = new Array(); CheckTextField('firstname', 'row_firstname', frm); CheckTextField('lastname', 'row_lastname', frm); CheckTextField('address', 'row_address', frm); CheckTextField('city', 'row_city', frm); CheckTextField('state', 'row_state', frm); CheckZip('zip', 'row_state', frm, 'True'); CheckPhone('work_phone_number_', 'row_work_phone_number_', frm, 'True'); CheckEmail('email', 'row_email', frm, 'True'); if (error.length > 0) { //turn on error header and scroll page to error header document.getElementById("contentError").style.display = ""; location = '#contentError'; return false; } else { document.getElementById("contentError").style.display = "none"; return true; } } else //browser not compatible { return true; } } function ValidateRBCQuoteRequest(frm) { if(isBrowserCompatible()) { error = new Array(); CheckDropDown('state', 'row_state', frm); CheckDropDown('Sex', 'row_Sex', frm); CheckDate('Month', 'Day','Year', 'row_date', frm, 'True'); CheckDropDown('Amount', 'row_Amount', frm); CheckRadioButton('coverageTerm', 'row_coverageTerm', frm); CheckRadioButton('tobacco', 'row_tobacco', frm); CheckTextField('firstname', 'row_firstname', frm); CheckTextField('lastname', 'row_lastname', frm); CheckPhone('home_phone_number_', 'row_home_phone_number_', frm, 'True'); CheckEmail('email', 'row_email', frm, 'True'); if (error.length > 0) { //turn on error header and scroll page to error header document.getElementById("contentError").style.display = ""; location = '#contentError'; return false; } else { document.getElementById("contentError").style.display = "none"; return true; } } else //browser not compatible { return true; } } function ValidateHealth(frm) { if(isBrowserCompatible()) { error = new Array(); CheckEmail('Email', 'row_Email', frm, 'True'); CheckZip('ZipCode', 'row_ZipCode', frm, 'True'); if (error.length > 0) { //turn on error header and scroll page to error header document.getElementById("contentError").style.display = ""; location = '#contentError'; return false; } else { document.getElementById("contentError").style.display = "none"; return true; } } else //browser not compatible { return true; } } function ValidateHome(frm) { if(isBrowserCompatible()) { error = new Array(); CheckEmail('Email', 'row_Email', frm, 'True'); CheckZip('ZipCode', 'row_ZipCode', frm, 'True'); if (error.length > 0) { //turn on error header and scroll page to error header document.getElementById("contentError").style.display = ""; location = '#contentError'; return false; } else { document.getElementById("contentError").style.display = "none"; return true; } } else //browser not compatible { return true; } } function ValidateLTC(frm) { if(isBrowserCompatible()) { error = new Array(); CheckDropDown('state', 'row_state', frm); if (error.length > 0) { //turn on error header and scroll page to error header document.getElementById("contentError").style.display = ""; location = '#contentError'; return false; } else { document.getElementById("contentError").style.display = "none"; return true; } } else //browser not compatible { return true; } } function ValidateAuto(frm) { if(isBrowserCompatible()) { error = new Array(); CheckZip('zipcode', 'row_zipcode', frm, 'True'); if (error.length > 0) { //turn on error header and scroll page to error header document.getElementById("contentError").style.display = ""; location = '#contentError'; return false; } else { document.getElementById("contentError").style.display = "none"; return true; } } else //browser not compatible { return true; } } //------- function CheckAnnualIncome (ElmtName, RowName, frm,isReq) { if(!frm.elements[ElmtName + '_decline'].checked) CheckNumericField (ElmtName,RowName, frm, isReq); else removeErrorFormatting(ElmtName, RowName, frm); } //------- function CheckTextField (ElmtName, RowName, frm) { if (!frm.elements[ElmtName]) return; if(trim(frm.elements[ElmtName].value) == '') ThrowError(ElmtName, RowName, frm); else removeErrorFormatting(ElmtName, RowName, frm); } //---- function CheckSpouseTextField (ElmtName, RowName, frm) { if (!frm.elements[ElmtName]) return; for(var i=0;i < frm.spouse_policy.length; i++) { if(frm.spouse_policy[i].checked && frm.spouse_policy[i].value == 'yes') { CheckTextField (ElmtName, RowName, frm); }else{ removeErrorFormatting(ElmtName, RowName, frm); } } } //------ function CheckNumericField(ElmtName, RowName, frm, isReq) { if (frm.elements[ElmtName].value != '' || isReq.toLowerCase() == 'true') { var val = frm.elements[ElmtName].value.replace(/,/g,''); val = val.replace('$', ''); if(parseFloat(val)!=(val*1) || val == '') ThrowError(ElmtName, RowName, frm); else removeErrorFormatting(ElmtName, RowName, frm); } else { removeErrorFormatting(ElmtName, RowName, frm); } } function CheckIntegerField(ElmtName, RowName, frm, isReq) { if (frm.elements[ElmtName].value != '' || isReq.toLowerCase() == 'true') { if(frm.elements[ElmtName].value.indexOf('.') != -1 || (frm.elements[ElmtName].value % 1) != 0 || frm.elements[ElmtName].value == '') ThrowError(ElmtName, RowName, frm); else removeErrorFormatting(ElmtName, RowName, frm); } else { removeErrorFormatting(ElmtName, RowName, frm); } } //----- function CheckEmail (ElmtName, RowName, frm, isReq) { //add for optimost required field testing. if(isOptRequired) isReq = 'true'; var regEx; regEx = /^[\w-]+(?:\.[\w-]+)*@(?:[\w-]+\.)+[a-zA-Z]{2,7}$/; if(!regEx.test(frm.elements[ElmtName].value) && (frm.elements[ElmtName].value != '' || isReq != 'False')) ThrowError(ElmtName, RowName, frm); else removeErrorFormatting(ElmtName, RowName, frm); } //------- function CheckDate(ElmtMonth, ElmtDay, ElmtYear, RowName, frm, isReq) { var Day = frm.elements[ElmtDay].options[frm.elements[ElmtDay].selectedIndex].value; var Month = frm.elements[ElmtMonth].options[frm.elements[ElmtMonth].selectedIndex].value - 1; var Year = frm.elements[ElmtYear].options[frm.elements[ElmtYear].selectedIndex].value; var DateObj = new Date(Year,Month,Day); if ( DateObj.getMonth() != Month) { ThrowError(RowName, RowName, frm); } else { removeErrorFormatting(RowName, RowName, frm); } } //------- function CheckZip(ElmtName, RowName, frm, isReq) { var regEx regEx = /^\d{5}$|^\d{5}-\d{4}$/; if(!regEx.test(frm.elements[ElmtName].value) && (frm.elements[ElmtName].value != '' || isReq != 'False')) ThrowError(ElmtName, RowName, frm); else removeErrorFormatting(ElmtName, RowName, frm); } //------ function CheckDropDown(ElmtName, RowName, frm) { if (!frm.elements[ElmtName]) return; if(frm.elements[ElmtName].options.selectedIndex == 0) ThrowError(ElmtName, RowName, frm); else removeErrorFormatting(ElmtName, RowName, frm); } //------- function CheckRadioButton(ElmtName, RowName, frm) { if (!frm.elements[ElmtName]) return; var radioChecked = false; for(var i=0;i < frm.elements[ElmtName].length; i++) { if(frm.elements[ElmtName][i].checked) { radioChecked = true; break; } } if(!radioChecked) ThrowError(ElmtName, RowName, frm); else removeErrorFormatting(ElmtName, RowName, frm); } //------- function CheckCheckboxes(ElmtName, RowName, frm) { if (!frm.elements[ElmtName]) return; var checkboxChecked = false; for(var i=0;i < frm.elements[ElmtName].length; i++) { if(frm.elements[ElmtName][i].checked) { checkboxChecked = true; break; } } if(!checkboxChecked) ThrowError(ElmtName, RowName, frm); else removeErrorFormatting(ElmtName, RowName, frm); } //------- function CheckPhone(ElmtNames, RowNames, frm, isReq) { //add for optimost required field testing. if(isOptRequired) isReq = 'true'; checkPhoneNumbers(ElmtNames, RowNames, frm, isReq) } //------ function CheckFrequency(ElmtName, RowName, frm) { var Tobacco = new Array(3,4,5,6,7,8); var ThrowErrorFlag = false; for(i = 0; i < Tobacco.length; i++) { if(Tobacco[i] == frm.elements["Tobacco"].options[frm.elements["Tobacco"].selectedIndex].value && frm.elements["Frequency"].options.selectedIndex == 0) { ThrowError("Frequency", RowName, frm); ThrowErrorFlag = true; break; } } if(!ThrowErrorFlag) removeErrorFormatting(ElmtName, RowName, frm); } function CheckTextArea(field, maxlen) { if (field.value.length > maxlen) { field.value = field.value.substring(0, maxlen); alert('Only 1000 characters allowed. Your input has been truncated to 1000 characters'); } } //------ function ThrowError(ElmtName, RowName, frm) { if(!eval("document.getElementById('" + RowName + "')")) return; applyErrorFormatting(ElmtName, RowName,frm) error[error.length] = RowName; } //------ function applyErrorFormatting(fldName, RowName,frm) { tableRow = eval("document.getElementById('" + RowName + "')"); tableRow.className = "error2"; } //----- function removeErrorFormatting(fldName, RowName,frm) { var isSharedRow = CheckForSharedRow(RowName) // call function to handle fields that share the same row if(isSharedRow) return true; tableRow = eval("document.getElementById('" + RowName + "')"); if(tableRow) tableRow.className = "quoter"; } function CheckForSharedRow(RowName) { for(var i=0;i<error.length;i++) { if(error[i] == RowName) return true; } return false; } function isBrowserCompatible() { if(document.getElementById) return true; else return false; } function trim(str) { return str.replace(/^\s*|\s*$/g,""); } //------ function OpenWindow(name,filename,height,width,parameters) { var hwin = window.open(filename,name,"height=" + height + ",width=" + width + "," + parameters); hwin.focus(); } //----- function StandardPopup(pagePath) { OpenWindow("", pagePath, 450, 300, ""); } //------ Code for the form: Code: <form action="#" method="get" onsubmit="return ValidateQuoteRequest(this);" name="FrontPage_Form"> <tr class="quoter" id="row_state"> <td align="right" nowrap=""><a href="javascript:popUp('state')" title="">State</a></td> <td colspan="2"> <select name="state" size="1" tabindex="12"> <option value="-1">Select state...</option> <option value="AK">Alaska</option> </select> </td> </tr> <tr class="quoter" id="row_date"> <td align="right"><a href="javascript:popUp('dob');" title="">Date of Birth</a></td> <td colspan="2"><select name="Month"> <option value="-1">Month</option> <option value="01">Jan</option> </select> <select name="Day"> <option value="-1">Day</option> <option value="01">01</option> </select> <select name="Year" size="1"> <option value="-1">Year</option> <option value="1921">1921</option> </select> </td> </tr> <tr class="quoter" id="row_sex"> <td align="right"><a href="javascript:popUp('gender')" title="">Gender</a></td> <td colspan="2"><select name="Sex" size="1"> <option value="-1">Select...</option> <option value="1">Male</option> </select> </td> </tr> <tr class="quoter" id="row_Height"> <td align="right">Height</td> <td nowrap="" colspan="2"><select name="Height_Feet" size="1"> <option value="-1"></option> </select> ft <select name="Height_Inches" size="1"> <option value="-1"></option> </select> in Weight <input name="Weight" size="3" maxlength="3" value=""> lbs </td> </tr> <tr class="quoter" id="row_tobacco"> <td align="right"><a href="javascript:popUp('tobacco')" title="">Tobacco/ Nicotine Use</a></td> <td colspan="2"><select name="Tobacco" onchange="toggleRow(this,'4,5,6,7,8','row_tobaccotype',document.FrontPage_Form.Frequency)"> <option value="-1">Select...</option> <option value="1">Never used</option> <option value="7">Current user</option> </select></td> </tr> <tr class="quoter" style="display: none; " id="row_tobaccotype"> <td align="right">Type of Tobacco or Nicotine and frequency of use</td> <td colspan="2"><select name="Frequency"> <option value="0" selected="">Please select...</option> <option value="10">Cigarettes, less than 1/2 pack a day</option> </select></td> </tr> <tr class="quoter" id="row_coverage"> <td align="right" class="quoter"><a href="javascript:popUp('calculator','https');" title="">Coverage Amount</a></td> <td><select name="Amount" size="1"> <option value="750000">$750,000</option> </select> <a href="javascript:popUp('calculator');" title="" class="nav-sub" ;=""><img src="./Insurance_files/help.gif" width="16" height="17" alt="" border="0" align="bottom"></a></td><td class="quoter"><a href="javascript:popUp('calculator');" title="">How much life<br>insurance do I need?</a></td> </tr> <tr class="quoter"> <td align="right"><a href="javascript:popUp('term');" title="">Guaranteed Term</a></td> <td class="quoter" colspan="2" id="ProductType"><select name="ProductType" size="1"> <option value="8">10 Years</option> </select></td> </tr> <tr class="quoter" id="row_PreClass"> <td align="right"><a href="javascript:popUp('healthclass');" title="">Health Class</a></td> <td><select name="PreClass" size="1"> <option value="0" selected="">Best Class</option> <option value="2">Preferred</option> </select> <a href="javascript:popUp('healthclass');" title=""><img src="./Insurance_files/help.gif" width="16" height="17" alt="" border="0" align="bottom"></a></td> <td><a href="javascript:popUp('healthclass');" title="">How do I determine<br>my health class?</a><a href="#">*</a></td> </tr> <tr class="quoter" id="row_firstname"> <td align="right"> First Name</td> <td class="quoter" colspan="2"><input name="firstname" size="30" maxlength="50" value=""></td> </tr> <tr class="quoter" id="row_lastname"> <td align="right"> Last Name</td> <td colspan="2"><input name="lastname" size="30" maxlength="50" value=""></td> </tr> <tr class="quoter" id="row_workphone"> <td align="right">Social Security Number</td> <td colspan="2">(<input maxlength="3" name="ssn1" size="3" value="">)-<input maxlength="2" name="ssn2" size="2" value="">-<input name="ssn3" size="4" maxlength="4" value=""></td> </tr> <tr class="quoter" id="row_workphone"> <td align="right">Work Phone</td> <td colspan="2">(<input maxlength="3" name="workphone1" size="3" value="">)-<input maxlength="3" name="workphone2" size="3" value="">-<input name="workphone3" size="4" maxlength="4" value=""></td> </tr> <tr class="quoter" id="row_homephone"> <td align="right">Home Phone</td> <td colspan="2">(<input maxlength="3" name="homephone1" size="3" value="">)-<input maxlength="3" name="homephone2" size="3" value="">-<input name="homephone3" size="4" maxlength="4" value=""></td> </tr> <tr class="quoter" id="row_email"> <td align="right"><a href="javascript:popUp('email','https');">E-mail</a></td> <td colspan="2"><input name="email" size="30" maxlength="80" value=""></td> </tr> <tr> <td colspan="3" align="center" nowrap=""> <input type="image" title="Please click only once." name="Submit" src="./Insurance_files/compare_rates.gif" width="172" height="28" value="Compare Rates Now!" alt="Get Your Life Insurance Quote Now"> </form> |