JavaScript - Validation Javascript Using Type
hello,
I have a form which contains multiple inputs with type 'text' and 'radio' buttons, and i'm trying to validate all these fields using javascript. Know that the id's and names came from database. so i want to validate by type. Please anyone help me as fast as possible thank you Similar TutorialsHello all, I have in my application input type file for uploading files. How can i do javascript validation to check if filename has special characters in it?? Thanks In this code, what does the beginning "setCal ()" do, and what is it? Its not a function, or a variable, I'm confused... Code: <script> /*Copyright 1996 - Tomer and Yehuda Shiran Feel free to "steal" this code provided that you leave this notice as is. Additional examples from the book can be found at http://www.geocities.com/SiliconValley/9000/ For more information contact Tomer or Yehuda Shiran <yshiran@iil.intel.com>*/ setCal() function getTime() { // initialize time-related variables with current time settings var now = new Date() var hour = now.getHours() var minute = now.getMinutes() now = null var ampm = "" // validate hour values and set value of ampm if (hour >= 12) { hour -= 12 ampm = "PM" } else ampm = "AM" hour = (hour == 0) ? 12 : hour // add zero digit to a one digit minute if (minute < 10) minute = "0" + minute // do not parse this number! // return time string return hour + ":" + minute + " " + ampm } function leapYear(year) { if (year % 4 == 0) // basic rule return true // is leap year /* else */ // else not needed when statement is "return" return false // is not leap year } function getDays(month, year) { // create array to hold number of days in each month var ar = new Array(12) ar[0] = 31 // January ar[1] = (leapYear(year)) ? 29 : 28 // February ar[2] = 31 // March ar[3] = 30 // April ar[4] = 31 // May ar[5] = 30 // June ar[6] = 31 // July ar[7] = 31 // August ar[8] = 30 // September ar[9] = 31 // October ar[10] = 30 // November ar[11] = 31 // December // return number of days in the specified month (parameter) return ar[month] } function getMonthName(month) { // create array to hold name of each month var ar = new Array(12) ar[0] = "January" ar[1] = "February" ar[2] = "March" ar[3] = "April" ar[4] = "May" ar[5] = "June" ar[6] = "July" ar[7] = "August" ar[8] = "September" ar[9] = "October" ar[10] = "November" ar[11] = "December" // return name of specified month (parameter) return ar[month] } function setCal() { // standard time attributes var now = new Date() var year = now.getYear() if (year < 1000) year+=1900 var month = now.getMonth() var monthName = getMonthName(month) var date = now.getDate() now = null // create instance of first day of month, and extract the day on which it occurs var firstDayInstance = new Date(year, month, 1) var firstDay = firstDayInstance.getDay() firstDayInstance = null // number of days in current month var days = getDays(month, year) // call function to draw calendar drawCal(firstDay + 1, days, date, monthName, year) } function drawCal(firstDay, lastDate, date, monthName, year) { // constant table settings var headerHeight = 50 // height of the table's header cell var border = 2 // 3D height of table's border var cellspacing = 4 // width of table's border var headerColor = "midnightblue" // color of table's header var headerSize = "+3" // size of tables header font var colWidth = 60 // width of columns in table var dayCellHeight = 25 // height of cells containing days of the week var dayColor = "darkblue" // color of font representing week days var cellHeight = 40 // height of cells representing dates in the calendar var todayColor = "red" // color specifying today's date in the calendar var timeColor = "purple" // color of font representing current time // create basic table structure var text = "" // initialize accumulative variable to empty string text += '<CENTER>' text += '<TABLE BORDER=' + border + ' CELLSPACING=' + cellspacing + '>' // table settings text += '<TH COLSPAN=7 HEIGHT=' + headerHeight + '>' // create table header cell text += '<FONT COLOR="' + headerColor + '" SIZE=' + headerSize + '>' // set font for table header text += monthName + ' ' + year text += '</FONT>' // close table header's font settings text += '</TH>' // close header cell // variables to hold constant settings var openCol = '<TD WIDTH=' + colWidth + ' HEIGHT=' + dayCellHeight + '>' openCol += '<FONT COLOR="' + dayColor + '">' var closeCol = '</FONT></TD>' // create array of abbreviated day names var weekDay = new Array(7) weekDay[0] = "Sun" weekDay[1] = "Mon" weekDay[2] = "Tues" weekDay[3] = "Wed" weekDay[4] = "Thu" weekDay[5] = "Fri" weekDay[6] = "Sat" // create first row of table to set column width and specify week day text += '<TR ALIGN="center" VALIGN="center">' for (var dayNum = 0; dayNum < 7; ++dayNum) { text += openCol + weekDay[dayNum] + closeCol } text += '</TR>' // declaration and initialization of two variables to help with tables var digit = 1 var curCell = 1 for (var row = 1; row <= Math.ceil((lastDate + firstDay - 1) / 7); ++row) { text += '<TR ALIGN="right" VALIGN="top">' for (var col = 1; col <= 7; ++col) { if (digit > lastDate) break if (curCell < firstDay) { text += '<TD></TD>'; curCell++ } else { if (digit == date) { // current cell represent today's date text += '<TD HEIGHT=' + cellHeight + '>' text += '<FONT COLOR="' + todayColor + '">' text += digit text += '</FONT><BR>' text += '<FONT COLOR="' + timeColor + '" SIZE=2>' text += '<CENTER>' + getTime() + '</CENTER>' text += '</FONT>' text += '</TD>' } else text += '<TD HEIGHT=' + cellHeight + '>' + digit + '</TD>' digit++ } } text += '</TR>' } // close all basic table tags text += '</TABLE>' text += '</CENTER>' // print accumulative HTML string document.write(text) } </script> <p align="center"><font face="arial" size="-2">This free script provided by</font><br> <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript Kit</a></font></p> can i write the encryption type in javascript?? i am writing like this in my javascript function, but not able to getting it work...... document.form_name.enctype ="multipart/form-data" Okay I am looking for some good free scripts of dynamic javascript menu (I dont know how to call them properly). A type of menu where let say on the left you click on item and on the right it updates content to cliced item. Any ideas where could I find some good or how are those called?
Reply With Quote 01-24-2015, 11:31 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts I think you need to be more specific. Do you mean you want to do this all in one HTML page? So that the displayed content changes depending on what tab or button the user clicks on? That's not quite the same thing as what is normally called a navigation menu, where more often then not you are using the menu to get to ANOTHER html page. i have know that JavaScript the data types are either:Primitive (number", "string", "boolean", "undefined",null), or Non-primitive (objects). but why the return values of using typeof can be "function"? i feel this collide with the above. php has the $_POST GLOBAL that contains an array of all the POST form variables. Does Javascript contain something similar built in?
Hi, I have an array in JavaScript. How can I GROUPBY Branch, then by Client and then by Referral Type and COUNT DISTINCT LPS # in JavaScript. Please note I need to do this client side using JavaScript. Array Data: Branch Client Referral Type LPS # 402036 402430 Psychological File Review 30 402049 402805 In-Home Assessment 10.87927 402050 402993 Chiropractic Assessment 100 402049 402805 Chiropractic File Review 10.88054 402049 402806 Chiropractic File Review 10.88055 402049 402806 Defense Medical 20 402049 402807 Chiropractic Assessment 10 402049 402807 In-Home Assessment + Form 1 10.88054 402049 402807 Physiotherapy Assessment 10 402049 402808 Attendant Care Assessment 10 402049 402808 Chiropractic Assessment 10.88041 402049 402808 In-Home Assessment 10 402049 402816 Chiropractic Assessment 10.85316 402049 402827 Neurological File Review 10.88047 402049 402827 Social Work File Review 10.88044 402050 402605 Psychological File Review 880434 402050 402661 Physician Assessment 878203 402050 402993 Physician Assessment 1000 402036 402575 Psychological File Review 50 Thanks hi guyz i do have a problem in passing javascript variable to <input type=hidden value=""> here's my code: <?php while ($row = mysql_fetch_array($result)) { ?> <script type="text/javascript"> function viewcodec(){ var randomValueCodec = randomString(5, 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'); document.getElementById('commentMarkCodeCompCodec-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec; document.getElementById('commentMarkCodeComp-'+<?php echo $row['p_id'];?>).innerHTML = randomValueCodec; } </script> <form action="" method="post" name="postsForms"> <div class="commentBox" align="right" id="commentBox-<?php echo $row['p_id'];?>" <?php echo (($comment_num_row) ? '' :'style="display:none"')?>> <input type=text id="commentMarkname-<?php echo $row['p_id'];?>" name="commentmarkname" class="commentMarkname" size="35" maxlength="20"> <textarea class="commentMark" id="commentMark-<?php echo $row['p_id'];?>" name="commentmark" cols="60"></textarea> <input type=text id="commentMarkcode-<?php echo $row['p_id'];?>" name="commentmarkcode" class="commentMarkcode" size="35" maxlength="20"> <br clear="all" /> <span id='commentMarkCodeCompCodec-<?php echo $row['p_id'];?>'><b><script type="text/javascript">viewcodec();</script></b></span> <input type="hidden" id="commentMarkCodeComp-<?php echo $row['p_id'];?>" name="commentMarkCodeComp" value=""> <br clear="all" /> <br clear="all" /> <a id="SubmitComment" style="float:right" class="small button comment"> Comment</a> </div> </form> <?php } ?> How do you make an ios5 type notification system with javascript for your webpage?
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> 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) 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 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> 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> 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'}> 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 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 + "' > "); 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.. |