JavaScript - Comma Separated Values Validation In Javascript
hi
I have one text box , it can have values like 1 or 1,2 or 1,225,345,21 ie multiple values so ......But now i want textbox should validate weather values entered by user are proper toString().match(/^(([0-9](,)?)*)+$/) This is code i'm using its validating correct only ,but one problem when user enter values like this inputval:1,22,34,25,645, the last comma is not validating it should through error can any one help me plz Similar TutorialsI am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidator If the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed. I want to be able to do this without having to do a postback. I already have the logic on the code behind and the enquiry object. also I am fairly new to javascript so I have been using mostly jQuery as easier to implement Hi All, Using Dreamweaver CS4. I have a web form that is submitted and then we pull up the information in excel using delimited fields. The problem with this is the end user will use commas (even though we have messages that say do not use commas) which messes up our data in excel. I created some code for a different field where commas were more frequent but there are new fields that users are adding commas into. Anyways, I can't figure out exactly how to code this and was wondering if someone could work out the kinks for me: My code: Code: if ( trim( frm.elements["ShipToBuildingRoom."] ).length < 4 ) oops += "You must enter your Building and Room information.\n"<br> var val = frm.ShipToBuildingRoom.value.replace(/[^\d\;\,]/g, "" ).replace(/\,/g, ";"); frm.ShipToBuildingRoom.value = val; Hey CF, I'm currently working on a website called 'eXtreme Gaming' I've almost completed it, apart from two things. - Adding two values on my checkout page for the Grandtotal (I've tried everything, but I'm too much of a noob and have probably missed something small). - Validation of forms (I don't know where to start here, I've looked on w3schools for tuts etc but I'm having difficulty incorporating it on my site) I'm going to put the code for my checkOut page only, if you are able to help me many thanks in advance. [quote] Code: <HTML> <HEAD> <script language="JavaScript" src="laptopsCookie.js"> </script> <script language="JavaScript" src="desktopsCookie.js"> </script> <script language="JavaScript"><!-- function calculateTotalPurchaseLaptop(formRef) { var laptopTotal=0; for (var i=0; i<LaptopListPurchase.length/2;i++) { var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value; formRef.elements['subTotal'+i].value = subTotal.toFixed(2); // document.orderForm2.grandTotal.value = document.orderForm.laptopTotal.value + document.orderForm2.desktopTotal.value laptopTotal += subTotal; } formRef.laptopTotal.value = laptopTotal.toFixed(2); } //--></script> <script language="JavaScript"><!-- function calculateTotalPurchaseDesktop(formRef) { var desktopTotal=0; for (var i=0; i<DesktopListPurchase.length/2;i++) { var subTotal = formRef.elements['quantity'+i].value * formRef.elements['price'+i].value; formRef.elements['subTotal'+i].value = subTotal.toFixed(2); desktopTotal += subTotal; } formRef.desktopTotal.value = desktopTotal.toFixed(2); } //--></script> <script language="Javascript"><!-- function checkform() { if (document.payment.Name.value == "") { alert('Please enter a name'); return false; } //else if(isNaN(document.payment.CreditCard.value) || document.payment.CreditCard.length !== 10) //{ // alert('Invalid Credit Card Number'); // return false; //} else if (document.payment.Adress.value == "") { alert('Please enter your adress.'); return false; } else if (document.payment.State.selectedIndex == 0) { alert('Please select a state'); return false; } return true; } </script> </HEAD> <BODY> <TITLE>Check Out</TITLE> <script> var html = ""; html += '<TABLE align="center"><tr><td><img src = "images/checkOutTitle.png" align="center" style="border:none" /></td></tr></TABLE>'; html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">' html += '<form id = "orderForm" name = "orderForm" method = POST action="javascript:void(0)">'; html += '<tr>'; html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>'; html += '</tr>'; for (var i=0; i<LaptopListPurchase.length;i=i+2) { html += '<tr><td>' + LaptopListPurchase[i] + '</td>'; html += '<td><select NAME="quantity' + i/2 + '" onChange="calculateTotalPurchaseLaptop(this.form)">'; html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>'; html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>'; html += '</select></td>'; html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + LaptopListPurchase[i+1] + '" readonly></td>'; html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>'; html += '</tr>'; } html += '<tr>'; html += '<td></td>'; html += '<td></td>'; html += '<td></td>'; html += '<td>$<input type=TEXT name="laptopTotal" value="" readonly size=7></td></tr>'; html += '</form>'; html += '</table>'; document.write(html); // Update the quantities // var quantityLaptop; for (var i=0; i<LaptopList.length/2;i++) { // Get the quantity of each type of Laptop // quantityLaptop = getCookie("Laptop" + i); document.orderForm.elements("quantity"+i).value = quantityLaptop; } // Update the totals // calculateTotalPurchaseLaptop(document.orderForm) var html = ""; html += '<TABLE align = "center" border="2" cellpadding="2" cellspacing="2" width="80%">' html += '<form id = "orderForm2" name = "orderForm2" method = POST action="javascript:void(0)">'; html += '<tr>'; html += '<th>Product</th><th>Quantity</th><th>Price</th><th>Sub Total</th>'; html += '</tr>'; for (var i=0; i<DesktopListPurchase.length;i=i+2) { html += '<tr><td>' + DesktopListPurchase[i] + '</td>'; html += '<td><select NAME="quantity' + i/2 + '" onChange="calculateTotalPurchaseDesktop(this.form)">'; html += '<OPTION VALUE="0">0</OPTION><OPTION VALUE="1">1</OPTION><OPTION VALUE="2">2</OPTION>'; html += '<OPTION VALUE="3">3</OPTION><OPTION VALUE="4">4</OPTION><OPTION VALUE="5">5</OPTION>'; html += '</select></td>'; html += '<td>$<input type="text" name="price' + i/2 + '" size=5 value="' + DesktopListPurchase[i+1] + '" readonly></td>'; html += '<td>$<input type="text" name="subTotal' + i/2 + '" size=5 value="0.00" readonly></td>'; html += '</tr>'; } html += '<tr>'; html += '<td></td>'; html += '<td></td>'; html += '<td></td>'; html += '<td>$<input type=TEXT name="desktopTotal" value="0.00" readonly size=7></td></tr>'; html += '<td></td>'; html += '<td></td>'; html += '<td align = "center"><b>Grand Total</b></td>'; html += '<td>$<input type=TEXT name="grandTotal" value="0.00" readonly size=7></td></tr>'; html += '</form>'; html += '</table>'; document.write(html); // Update the quantities // var quantityDesktop; for (var i=0; i<DesktopList.length/2;i++) { // Get the quantity of each type of Desktop // quantityDesktop = getCookie("Desktop" + i); document.orderForm2.elements("quantity"+i).value = quantityDesktop; } // Update the totals // calculateTotalPurchaseDesktop(document.orderForm2) </script> <table align = 'center'> <tr> <td><h1>Pay for your Purchase Below</h1></td> </tr> </table> <table border="1" align = 'center' > <form name="payment" method="post"> <tr> <td> Name on Credit Card: <input type="text" name="Name" /><br /> Credit Card number: <input type="text" name="CreditCard" /><br /> Street Adress: <input type="text" name="Adress" /><br /> Town: <input type="text" name="Town" /><br /> State/Territory: <select NAME="State"><OPTION VALUE="Null">--</OPTION><OPTION VALUE="Australian Capital Territory">ACT</OPTION><OPTION VALUE="South Australia">SA</OPTION><OPTION VALUE="Northen Territory">NT</OPTION><OPTION VALUE="Queensland">QLD</OPTION><OPTION VALUE="Victoria">Vic</OPTION><OPTION VALUE="Western Australia">WA</OPTION><OPTION VALUE="Tasmania">Tas</OPTION></select> </td> <td> <INPUT TYPE="RADIO" NAME="Master Card" VALUE="Master Card">Master Card<BR> <INPUT TYPE="RADIO" NAME="Visa" VALUE="Visa">Visa<BR> <INPUT TYPE="RADIO" NAME="AMEX" VALUE="American Express">American Express<BR> </td> </tr> <tr> <td></td> <td><input type="submit" value="Submit" onclick="return checkform()"></td> </tr> </table> </BODY> </HTML>[ /quote] 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> 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 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 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'}> 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> 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 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 i need help with an assignment that validates forms using javascript. Using my instructors example as a guide, i wrote this if you click submit on the example it properly returns false and displays an error message, in my assignment it does nothing but submit to the echo while im trying to get an error message. The assignment is unfinished but i wanted to test out the first bit of code and its not working. could anyone tell me how to do this? i don't know anything about javascript, but it is the most elegant way to validate a form. i have 2 questions asked in a form (name=questions). First question are radio buttons with 3 answers (name=answer). Second is a questions with a numeric value as answer with max 10 characters (name=questionb). Could anyone tell me where to start? Thanks, Walter Hi, I am working on simple project and it's for the institute Class project where i am learning php. i have to submit the project as soon as possible. But i am doing it different way then of i was supposed. Instead of validation message i want to use a picture or icon with Red error icon and Green yes icon as you can check in the attached picture. I am calling a function on submit button and if there is any error then using document.GetElementById('error').style.background="none" and ="pic url". I am getting output but it's just for a second then disappeared. I have already attached the Screen Shot to get the full idea.. Mainly i want to display red icon on error and green one when there is not error. 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 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. I use this javascript validation in my form.. http://www.tizag.com/javascriptT/javascriptform.php but without validation values go to database.. Can anyone guide me how to solve this? First i import javascript file like this.. <script type="text/javascript" src="validate.js"></script> Part of the My code goes like this.... PHP Code: <form action="Process_reg.php" method="post" name="reg" id="reg" onsubmit="return formValidator()"> <div id="accordion" style="width:400px; height:500px; font-size:12px; font-family:Arial, Helvetica, sans-serif"> <h3><a href="#">General Details</a></h3> <div> <table cellpadding="5px" cellspacing="5px"> <tr> <td>First name</td> <td><input type="text" name="fname" id="fname" size="20px" title="Must be at least 8 characters." /></td> </tr> I just only try o validate email field only... email field goes like this PHP Code: <tr> <td>Email</td> <td><input type="text" name="email" id="email" size="20px" title="Enter Valid Email Address" /></td> </tr> My whole code attach here... Click here to download Thanks 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> I have a form developed in Dreamweaver CS5 using Spry Assets, I have 2 required fields in the form. One is email the other is phone. I want the user to only have to fill in one or the other, but one or the other needs to be filled out. Here is the form code: [code]<form id="form1" name="form1" method="post" action="http://www.greenhousegraphix.com/GatewayVentures/sendmail.php"> <span id="sprytextfield1"><label>Name</label> <input name="Name" type="text" id="Name" size="45" /> <span class="textfieldRequiredMsg">A value is required.</span></span><br /> <span id="sprytextfield3"><label>Title</label> <input name="Title" type="text" id="Title" size="45" /> </span><br /> <span id="sprytextfield2"><label>Company</label> <input name="Company" type="text" id="Company" size="45" /> </span><br /> <span id="sprytextarea1"><label>Address</label> <textarea name="Address" id="Address" cols="39" rows="2"></textarea> </span><br /> <span id="sprytextfield4"><label>City</label> <input name="City" type="text" id="City" size="45" /> </span><br /> <span id="sprytextfield5"><label>State</label> <input name="State" type="text" id="State" size="45" /> </span><br /> <span id="sprytextfield6"><label>Zip</label> <input name="Zip" type="text" id="Zip" size="45" /> <span class="textfieldInvalidFormatMsg">Invalid format.</span><span class="textfieldMinCharsMsg">Minimum number of characters not met.</span><span class="textfieldMinValueMsg">The entered value is less than the minimum required.</span></span><br /> <span id="sprytextfield7"><label>Phone</label> <input name="Phone" type="text" id="Phone" size="45" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br /> <span id="sprytextfield8"><label>Email</label> <input name="Email" type="text" id="Email" size="45" /> <span class="textfieldRequiredMsg">A value is required.</span><span class="textfieldInvalidFormatMsg">Invalid format.</span></span><br /> <span id="sprytextarea2"><label>Message</label> <textarea name="Message" id="Message" cols="39" rows="6"></textarea> </span><br /> <input name="SUBMIT" type="image" class="marginleft95px" src="images/submit.jpg" /> </form> </div> <div id="apDiv2"><img src="images/contact-us-keyboard.jpg" width="318" height="230" alt="contact us" /></div> <div id="apDiv3"><img src="images/contact-us.jpg" width="318" height="230" alt="contact us" /></div> </div></div> <script type="text/javascript"> var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur"]}); var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2", "none", {isRequired:false}); var sprytextfield3 = new Spry.Widget.ValidationTextField("sprytextfield3", "none", {isRequired:false}); var sprytextfield4 = new Spry.Widget.ValidationTextField("sprytextfield4", "none", {isRequired:false}); var sprytextfield5 = new Spry.Widget.ValidationTextField("sprytextfield5", "none", {isRequired:false}); var sprytextfield6 = new Spry.Widget.ValidationTextField("sprytextfield6", "zip_code", {isRequired:false}); var sprytextfield7 = new Spry.Widget.ValidationTextField("sprytextfield7", "phone_number", {validateOn:["blur"], hint:"(999) 999-9999"}); var sprytextfield8 = new Spry.Widget.ValidationTextField("sprytextfield8", "email", {validateOn:["blur"]}); var sprytextarea1 = new Spry.Widget.ValidationTextarea("sprytextarea1", {isRequired:false}); var sprytextarea2 = new Spry.Widget.ValidationTextarea("sprytextarea2", {isRequired:false}); </script>[code] Please help!! hi all, i have created one program using javascript.i have written using javascript functions.. can u tell me what is the problem with my program i have saved it as messages.js,but the script is not executing can u tell me what went wrong..... below is my javascript program..... Code: // form validation function // function checkName(form) { var eobj=document.getElementById('realnameerror'); var sRealName = form.realname.value; var oRE = /^[a-z0-9]+[_.-]?[a-z0-9]+$/i; var error=false; eobj.innerHTML=''; if (sRealName == '') { error='Error: Username cannot be blank!'; } else if (sRealName.length < 4) { error="UserName should be atleast 4 characters long"; } else if (!oRE.test(sRealName)) { error="Incorrect format."; } if (error) { if (hasFocus == false) { form.realname.focus(); hasFocus = true; } eobj.innerHTML=error; return false; } return true; } function checkEmail(form) /* for email validation */ { var eobj=document.getElementById('emailerror'); eobj.innerHTML=''; var error = false; if (form.email.value.length == 0) { error = 'Please enter email.'; } else if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(form.email.value)) { return true; } else { error = 'Invalid E-mail Address! Please re-enter.'; } if (error) { eobj.innerHTML=error; if (!hasFocus) { form.email.focus(); hasFocus = true; } return false; } return true; } function validatePwd(form) /* password & retype-password verification */ { var eobj1=document.getElementById('passworderror'); var eobj2=document.getElementById('password2error'); var minLength=6; var invalid=' '; var pw1=form.password.value; var pw2=form.password2.value; var error=false; eobj1.innerHTML=''; eobj2.innerHTML=''; if (pw1.length<1) { error='Please enter your password.'; } else if (pw1.length < minLength) { error='Your password must be at least ' + minLength + ' characters long. Try again.'; } else if (pw1.indexOf(invalid) > -1) { error='Sorry, spaces are not allowed.'; } else if (pw2.length == 0) { error='Please retype password.'; if (!hasFocus) { form.password2.focus(); hasFocus = true; } eobj2.innerHTML=error; return false; } if (error) { if (!hasFocus) { form.password.focus(); hasFocus = true; } eobj1.innerHTML=error; return false; } if (pw1 != pw2) { eobj2.innerHTML=' passwords not matching.Please re-enter your password.'; if (!hasFocus) { form.password2.focus(); hasFocus = true; } return false; } return true; } function validPhone(form) /* phone no validation */ { var eobj=document.getElementById('phonenoerror'); var valid = '0123456789'; var phone = form.phoneno.value; var error=false; var i=0; var temp; eobj.innerHTML=''; if (phone == '') { error='This field is required. Please enter phone number'; } else if (!phone.length > 1 || phone.length < 10) { error='Invalid phone number length! Please try again.'; } else { for (i=0; i < phone.length; i++) { temp = '' + phone.substring(i, i + 1); if (valid.indexOf(temp) == -1) { error='Invalid characters in your phone. Please try again.'; } } } if (error) { if (!hasFocus) { form.phoneno.focus(); hasFocus = true; } eobj.innerHTML=error; return false; } return true; } function validate() { hasFocus = false; var form = document.forms['form']; var ary=[checkName,checkEmail,validatePwd,validPhone]; var rtn=true; var z0=0; for (var z0=0;z0<ary.length;z0++) { if (!ary[z0](form)) { rtn=false; } } return rtn; } // START OF MESSAGE SCRIPT // var MSGTIMER = 20; var MSGSPEED = 5; var MSGOFFSET = 3; var MSGHIDE = 3; // build out the divs, set attributes and call the fade function // function inlineMsg(target,string,autohide) { var msg; var msgcontent; if(!document.getElementById('msg')) { msg = document.createElement('div'); msg.id = 'msg'; msgcontent = document.createElement('div'); msgcontent.id = 'msgcontent'; document.body.appendChild(msg); msg.appendChild(msgcontent); msg.style.filter = 'alpha(opacity=0)'; msg.style.opacity = 0; msg.alpha = 0; } else { msg = document.getElementById('msg'); msgcontent = document.getElementById('msgcontent'); } msgcontent.innerHTML = string; msg.style.display = 'block'; var msgheight = msg.offsetHeight; var targetdiv = document.getElementById(target); targetdiv.focus(); var targetheight = targetdiv.offsetHeight; var targetwidth = targetdiv.offsetWidth; var topposition = topPosition(targetdiv) - ((msgheight - targetheight) / 2); var leftposition = leftPosition(targetdiv) + targetwidth + MSGOFFSET; msg.style.top = topposition + 'px'; msg.style.left = leftposition + 'px'; clearInterval(msg.timer); msg.timer = setInterval("fadeMsg(1)", MSGTIMER); if(!autohide) { autohide = MSGHIDE; } window.setTimeout("hideMsg()", (autohide * 1000)); } // hide the form alert // function hideMsg(msg) { var msg = document.getElementById('msg'); if(!msg.timer) { msg.timer = setInterval("fadeMsg(0)", MSGTIMER); } } // face the message box // function fadeMsg(flag) { if(flag == null) { flag = 1; } var msg = document.getElementById('msg'); var value; if(flag == 1) { value = msg.alpha + MSGSPEED; } else { value = msg.alpha - MSGSPEED; } msg.alpha = value; msg.style.opacity = (value / 100); msg.style.filter = 'alpha(opacity=' + value + ')'; if(value >= 99) { clearInterval(msg.timer); msg.timer = null; } else if(value <= 1) { msg.style.display = "none"; clearInterval(msg.timer); } } // calculate the position of the element in relation to the left of the browser // function leftPosition(target) { var left = 0; if(target.offsetParent) { while(1) { left += target.offsetLeft; if(!target.offsetParent) { break; } target = target.offsetParent; } } else if(target.x) { left += target.x; } return left; } // calculate the position of the element in relation to the top of the browser window // function topPosition(target) { var top = 0; if(target.offsetParent) { while(1) { top += target.offsetTop; if(!target.offsetParent) { break; } target = target.offsetParent; } } else if(target.y) { top += target.y; } return top; } // preload the arrow // if(document.images) { arrow = new Image(7,80); arrow.src = "images/msg_arrow.gif"; } |