JavaScript - Validating Forms Using If Else
Similar Tutorialsokay, my main question here is, can you nest a function in an if statement? it seems to me that you cant.. gosh validating dates is difficult. Code: var userBDay = document.getElementById('BDay').value; var retVal = true; var errorMsg = ""; if (userBDay == "") { assignErrorClass("BDay"); errorMsg = errorMsg + "Please Enter a Birthday.\n"; retVal = false; } if (userBDay !== "") { if (badBirthday(userBDay)) { assignErrorClass("BDay"); errorMsg = errorMsg + "Invalid Birthday\n"; retVal = false; } else { retVal = true } } if (!retVal) { alert( errorMsg); } return retVal; function badBirthday (objName) { var obj = document.getElementById(objName); var dateStr = obj.value; var m = dateStr.split("/")[0]; var d = dateStr.split("/")[1]; var y = dateStr.split("/")[2]; var dateObj = new Date(y,m-1,d); //JavaScript and PHP number the months 0 to 11. if (dateObj.getFullYear() != y || dateObj.getMonth()+1 != m || dateObj.getDate() != d) { return true; //if invalid bithday } else { return false; //if valid bithday } } much thanks! I'm using the autofill forms plugin for firefox which can be found he https://addons.mozilla.org/en-US/firefox/addon/4775 I use it to automatically fill various web forms, duh. But I would like certain values to be chosend randomly from a list I create. I contacted the developer and he said the add on probably does not need a new feature because there is a 'dynamic tags' function to fill certain forms with dynamic values (e.g. the current time or date). He has given over the project to another developer and told me I probably would find a solution in a good javascript programming forum. So here I am! Can anyone help me with this? Basically, I just need a javascript code which chooses on item from an array randomly, I guess? I'm not a programmer myself, so any help would be greatly (!) appreciated. Thanks a lot in advance for any further guidance! Note: Here are sample dynamic tags from the plugin: <datetime> new Date().toLocaleString() <useragent> navigator.userAgent <langcode> navigator.language <resolution> screen.width+'x'+screen.height <clipboard> this.getClipboardText() Hi im not good with javavscript so got some code off the net to do some rollovers, however it doesnt validate. can anyone please help me as to why this maybe? 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>Untitled Document</title> <link rel="stylesheet" type="text/css" href="joho.css" /> <SCRIPT TYPE="text/javascript"> <!-- // copyright 1999 Idocs, Inc. http://www.idocs.com/tags/ // Distribute this script freely, but please keep this // notice with the code. var rollOverArr=new Array(); function setrollover(OverImgSrc,pageImageName) { if (! document.images)return; if (pageImageName == null) pageImageName = document.images[document.images.length-1].name; rollOverArr[pageImageName]=new Object; rollOverArr[pageImageName].overImg = new Image; rollOverArr[pageImageName].overImg.src=OverImgSrc; } function rollover(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; if (! rollOverArr[pageImageName].outImg) { rollOverArr[pageImageName].outImg = new Image; rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src; } document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src; } function rollout(pageImageName) { if (! document.images)return; if (! rollOverArr[pageImageName])return; document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src; } //--> </head> <body> <div id="wrapper"> <div id="contentwrapper"> <div id="col1"> <ul> <li><A HREF="home.html" onMouseOver = "rollover('home')" onMouseOut = "rollout('home')" ><img src="menu/row1sq1_home_OP.png" border="0" alt="Home" NAME="home"/></a><SCRIPT TYPE="text/javascript"> <!-- setrollover("rollovers/row1sq1_home_RO.png"); //--> </SCRIPT></li> <li><img src="menu/row2sq1_OP.png" alt="2"/></li> <li><A HREF="illustrations.html" onMouseOver = "rollover('illustrations')" onMouseOut = "rollout('illustrations')" ><img src="menu/row3sq1_illustrations_OP.png" border="0" alt="illustrations" NAME="illustrations"/></a><SCRIPT TYPE="text/javascript"> <!-- setrollover("rollovers/row3sq1_illustrations_RO.png"); //--> </SCRIPT></li> <li><img src="menu/row4sq1_OP.png" alt="4"/></li> </ul> </div> <div id="col2"> <ul> <li><img src="menu/row1sq2_OP.png" alt="1"/></li> <li><img src="menu/row2sq2_OP.png" alt="2"/></li> <li><img src="menu/row3sq2_OP.png" alt="3"/></li> <li><A HREF="portraits.html" onMouseOver = "rollover('portraits')" onMouseOut = "rollout('portraits')" ><img src="menu/row4sq2_portraits_OP.png" border="0" alt="portraits" NAME="portraits"/></a><SCRIPT TYPE="text/javascript"> <!-- setrollover("rollovers/row4sq2_portraits_RO.png"); //--> </SCRIPT></li> </ul> </div> <div id="col3"> <ul> <li><A HREF="about.html" onMouseOver = "rollover('about')" onMouseOut = "rollout('about')" ><img src="menu/row1sq3_about_OP.png" border="0" alt="About" NAME="about"/></a><SCRIPT TYPE="text/javascript"> <!-- setrollover("rollovers/row1sq3_about_RO.png"); //--> </SCRIPT></li> <li><A HREF="cards.html" onMouseOver = "rollover('cards')" onMouseOut = "rollout('cards')" ><img src="menu/row2sq3_cards_OP.png" border="0" alt="cards" NAME="cards"/></a><SCRIPT TYPE="text/javascript"> <!-- setrollover("rollovers/row2sq3_cards_RO.png"); //--> </SCRIPT></li> <li><img src="menu/row3sq3_squeak_OP.png" border="0" alt="1"/></li> <li><A HREF="contact.html" onMouseOver = "rollover('contact')" onMouseOut = "rollout('contact')" ><img src="menu/row4sq3_contact_OP.png" border="0" alt="contact" NAME="contact"/></a><SCRIPT TYPE="text/javascript"> <!-- setrollover("rollovers/row4sq3_contact_RO.png"); //--> </SCRIPT></li> </ul> </div> <div id="col4"> <ul> <li><img src="menu/row1sq4_OP.png" alt="1"/></li> <li><img src="menu/row2sq4_OP.png" alt="2"/></li> <li><A HREF="weddings.html" onMouseOver = "rollover('weddings')" onMouseOut = "rollout('weddings')" ><img src="menu/row3sq4_wedding_OP.png" border="0" alt="weddings" NAME="weddings"/></a><SCRIPT TYPE="text/javascript"> <!-- setrollover("rollovers/row3sq4_wedding_RO.png"); //--> </SCRIPT></li> <li><img src="menu/row4sq4_OP.png" alt="4"/></li> </ul> </div> </div> </div> </body> </html> thank Q C Code: <img class="border" alt="googtatic_map" src="http://maps.google.com/maps/api/staticmap?center=51.454863,0.011673&zoom=13&markers=United+Reformed+Church,+111+Burnt+Ash+Road,++Lee,+London+SE12+8RG,+UK&size=250x250&sensor=true" /> I have the above code and it is not validating with the w3c validation for XHTML it has thrown up 8 errors and 14 warnings. Should I ignore them or what? As I do like my code to validate. Hi everyone, Would any of you know a cross-platform way to validate XML against XSD in JavaScript? All examples found online use MSXML, which is only available under Windows/IE. Using remote web-services is not a option, since the script should be able to run online. Cheers, Vit Hi Folks I am trying to write a js that validates a form with two text inputs. The two inputs a 'D_techA' and 'D_techB'. I just want to add up (sum) the two input fields (which must be positive numbers) and make sure that they add up to exactly 100 (not more and not less). If they do not add up to 100, then an alert should pop up that says "The two values must add up to exactly 100." I have tried and tried to write a js that does this validation (looking at numerous validation scripts posted in this forum and elsewhere) and I just cannot seem to make it work. I would very much appreciate any suggestions! Thanks! The html code for my very simple form is: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> <form id="form1" name="form1" method="post" action=""> <label>Investment in Tech A <input name="D_techA" type="text" id="D_techA" /> </label> <label>Investment in Tech B <input name="D_techB" type="text" id="D_techB" /> </label> <p> <input name="Submit" type="submit"/> </p> </form> </body> </html> I managed to create the form that asks you to type in the information but I'm having some difficulty trying to figure out the alert to say "Thank you " after you have everything filled in and then hitting the button. my code is Code: <HTML> <HEAD> <TITLE> Form Validation Example </TITLE> <SCRIPT LANGUAGE="JavaScript"> function validatePersonalInfo(){ var _first = document.info.fname.value; var _city = document.info.city.value; var _phone = document.info.phone.value; if(_first.toString() == ""){alert("Please enter a first name.");} if(_city.toString() == ""){alert("Please enter your city.");} if(_phone.toString() == ""){alert("Please enter your phone number.");} var phoneInput = document.info.phone.value; var validPhone = false; var validCity = false; if(checkCity == true){ validCity = true; } else{ if(!checkPhone(phoneInput)){ alert("Phone number is invalid." + validPhone); } else{ validPhone = true; } if(validCity && validPhone){ alert("Your form has been verified"); } } } function checkPhone(str){ var regexp = /^(\d{10}|\d{3}-\d{3}-\d{4}|\(\d{3}\)\d{3}-\d{4})$/; return regexp.test(str); } function checkNum(length){ var cityLet = parseInt(cityEntry, 10); if (document.info.city.value.length == length){ if(cityLet != 0 && isNaN(cityLet) == false){ return true; } else { return false; } } else { return false; } } </script> </head> <body> <p> <form name="info" action="" method="post"> <table> <tr><td align="left">First Name:</td> <td align="left"> <input type="text" name="fname" size=15> </td> </tr> <br> </tr> <br> <tr> <td align="left">City:</td> <td align="left"> <input type="text" name="city" size=15> </td> </tr> <br> <tr><td align="left">phone</td> <td align="left"> <input type="text" name="phone" size=20></td> </tr> <br> </tr> <br> </table> <center> <input type="button" value="Submit" onClick="validatePersonalInfo()"> </center> </form> </body> </html> the help is greatly appreciated Hi Guys, I use this code to validate e-mail addresses: PHP Code: // checks if the e-mail address is valid var emailPat = /^(".*\"|[A-Za-z]\w*)@(\[\d{1,3}(\.\d{1,3}){3}]|[A-Za-z]\w*(\.[A-Za-z]\w*)+)$/; var matchArray = formSignup.txtEmail.value.match(emailPat); if (matchArray == null) { alert("Your email address seems incorrect. Please try again (check the '@' and '.'s in the e-mail address)"); return false; } What i noticed today, is if a customer registers with an e-mail like: something.something@hotmail.com the first dot throws up the error, i'm not to great on regex lol any help would be appreciated thanks guys Graham Hello all, I am pretty new to javascript and could use some help. I am validating a page (image attached) to make sure that total hours entered do not exceed the allocated amount, which is stored in the database. I have already validated to make sure that they enter a number and that it is not greater than 8. Could some one help me with the rest? thanks so much, Joe Code: var returncode = true var inputs = document.getElementsByTagName("INPUT") for(var x=0; x<inputs.length; x++) { if(inputs[x].type =='text' && isNaN(inputs[x].value)) { document.getElementById("hourserror").style.display = "block"; inputs[x].style.backgroundColor = '#FFCCCC'; returncode = false; } if(inputs[x].value > 8) { document.getElementById("totalerror").style.display = "block"; inputs[x].style.backgroundColor = '#FFCCCC'; returncode = false; } } return returncode; Hi guys! I have tried numerous attempts in getting the Address field to work (i.e. validated). I want it to accept letters, numbers, spaces and commas! However, it won't let me! Below is the code I have provided. Code: function validateAddress(fld) { var error = ""; var illegalChars = /[\W_]/; // } else if (illegalChars.test(fld.value)) { fld.style.background = 'Yellow'; error = "Your Billing address contains illegal characters!\n"; } else { fld.style.background = 'White'; } return error; } Thanks a lot! hi i need a help in java script. i have some text fields and when i enter the information in it and enter the validation button i need the results to be displayed in a box below these btns. Is it possible in Java script? Please see the attached image for some ideas. cheers Figured it out. Thanks
I have 5 radio buttons called A, B, C, D, and E in my html file. I need to validate them using javascript. If no radio buttons are selected, then a message should come up and say "none selected". I actually got this part done, and it works. However, I need to do one more thing. If radio button E and any other radio button(s) are selected simultaneously, then an error message should pop up and say "Wrong combinations." How should I go about doing this? I think I'll need a logical function to do this... thanks for any help! We are trying to validate a piece of code on our HTML pages and get the following message - "The text content of element script was not in the required format: Expected space, tab, newline, or slash but found < instead." The code is used to set up the Facebook tags in JavaScript, and does work by itself. However, we're trying to get it to work through validation on http://validator.w3.org Code: <script src="SiteTools.js"> //<![CDATA[ <!-- FacebookSetup('CABLED Project first 6 months', 'images/angela-imiev.jpg'); //--> //]]> </script> Thanks Hi! I am trying to check and see if three fields are empty and if they are then to alert the user saying to fill in one of the three fields. I tried this: Code: if (StreetNumber.value.length == 0) { if (StreetName.value.length == 0) { if (City.value.length == 0) { alert("Please enter a street number, street name, or city."); StreetNumber.focus(); return false; } } } and this: Code: if (StreetNumber.value.length == 0 && StreetName.value.length == 0 && City.value.length == 0) { alert("Please enter a street number, street name, or city."); StreetNumber.focus(); return false; } Neither one works. Not sure what I am doing wrong. Thanks in advance! I need to get an add on JS for this form to go with the current JS that is on it I need the add on JS to Validate all the fields have been filled out and then pop up an error if any of the fields are not filled out <FORM NAME="gather"><form onclick="return check(this);"> <fieldset> </p> <table width="200" border="0" cellpadding="10"> <tr> <th scope="row"><p align="left" class="style1">First Name*</p> <p> <div align="left"><input type="text" name="data_NameFirstName2" id="data_NameFirstName2" value="[Fname]"/> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Last Name*</p> <p> <div align="left"><input type="text" name="data_NameLastName2" id="data_NameLastName2" value="[Lname]"/> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Phone*</p> <p> <div align="left"><input type="text" name="phone1" id="phone1" /> </p></th> </tr> <tr> <th scope="row"><p align="left" class="style1">Email*</p> <p> <div align="left"><input type="text" name="email" id="email" /> </p></th> </tr> </table> </p> <p> <p><span class="style5">Please confirm your contact information.</span> <p><span class="style5"> (* = required) </span> <br /> <br /> <span class="style1"> <input type = "radio" name = "rad1" value = "Contact me"> <strong> Please contact me</strong></span></p> <p> <span class="style1">Please have my personal advisor</span></p> <p class="style1">contact me as soon as possible. <br /> <br /> </p> <p> <span class="style1"> <input type = "radio" name = "rad1" value = "Send me more info"> <strong>Send me more info</strong> </span></p> <p class="style1">I'm not ready to enroll yet, but</p> <p class="style1">please continue to send me more</p> <p class="style1">information and updates about </p> <p class="style1">going back to school <br /> <br /> </p> <p> <span class="style1"> <input type = "radio" name = "rad1" value = "Remove me from your mailing list"> <strong> No thanks </strong></span></p> <p class="style1"> Please remove me from your </p> <p class="style1">mailing list. <br /> <br /> </p> <label> <input type = "button" value = "submit" onclick ="chkrads()"> </label> </fieldset> </form> <script type = "text/javascript"> function chkrads() { var chosen = "None"; var which = -1; var len = document.gather.rad1.length; for (i = 0; i < len; i++) { if (document.gather.rad1[i].checked) { chosen = document.gather.rad1[i].value; which = i; } } if (chosen == "None") { alert("No Location Chosen"); } else { } if (which == 0) {window.location = "http://www.hudsonsd.com/national2010/thankcontact.html"} if (which == 1) {window.location = "http://www.hudsonsd.com/national2010/thanksend.html"} if (which == 2) {window.location = "http://www.hudsonsd.com/national2010/thanknocontact.html"} } </script> Thanks! Just wondering what the code would be to validate the radio buttons, thus when i click get score a pop up will tell me that one of the radio buttons was not selected. If you really want to help me it would be good if i was able to have get score and submit working on one button, and validating every field. My code is below (don't mind the questions and answers ) Code: <HEAD> <script language="JavaScript"> var numQues = 5; var numChoi = 3; var answers = new Array(5); answers[0] = "Life"; answers[1] = "Disturbing"; answers[2] = "Yahoo Answers"; answers[3] = "Playing Video Games in the Basement"; answers[4] = "About the portion of my Sandwich"; function getScore(form) { var score = 0; var currElt; var currSelection; for (i=0; i<numQues; i++) { currElt = i*numChoi; for (j=0; j<numChoi; j++) { currSelection = form.elements[currElt + j]; if (currSelection.checked) { if (currSelection.value == answers[i]) { score++; break; } } } } score = Math.round(score/numQues*100); form.percentage.value = score + "%"; var correctAnswers = ""; for (i=1; i<=numQues; i++) { correctAnswers += i + ". " + answers[i-1] + "\r\n"; } form.solutions.value = correctAnswers; } function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") { alert(alerttxt);return false; } else { return true; } } } 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_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;} { 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 } } } </script> </HEAD> <BODY> <h3>Quiz</h3> <form name="quiz"> 1. What do i win at..? <ul style="margin-top: 1pt"> <li><input type="radio" name="q1" value="Life">Life</li> <li><input type="radio" name="q1" value="Nothing At All">Nothing At All</li> <li><input type="radio" name="q1" value="Using a Computer">Using a Computer</li> </ul> 2. My Life is..? <ul style="margin-top: 1pt"> <li><input type="radio" name="q2" value="Boring">Boring</li> <li><input type="radio" name="q2" value="Disturbing">Disturbing</li> <li><input type="radio" name="q2" value="Like everyone elses">Like everyone elses</li> </ul> 3. I don't learn off my mother i learn off ..? <ul style="margin-top: 1pt"> <li><input type="radio" name="q3" value="Google">Google</li> <li><input type="radio" name="q3" value="Yahoo Answers">Yahoo Answers</li> <li><input type="radio" name="q3" value="The Bible">The Bible</li> </ul> 4. I Spend Most of my time ..? <ul style="margin-top: 1pt"> <li><input type="radio" name="q4" value="Cutting Down Palm Tree's">Cutting Down Palm Tree's</li> <li><input type="radio" name="q4" value="Eating">Eating</li> <li><input type="radio" name="q4" value="Playing Video Games in the Basement">Playing Video Games in the Basement</li> </ul> 5. I Complain the most about ..? <ul style="margin-top: 1pt"> <li><input type="radio" name="q5" value="JavaScript">JavaScript</li> <li><input type="radio" name="q5" value="About the portion of my Sandwich">About the portion of my Sandwich</li> <li><input type="radio" name="q5" value="Lag">Lag</li> </ul> <input type="button" value="Get score" onClick="getScore(this.form)"> <input type="reset" value="Clear answers"> <p> Score = <strong><input class="bgclr" type="text" size="5" name="percentage" disabled></strong><br><br> Correct answers:<br> <textarea class="bgclr" name="solutions" wrap="virtual" rows="4" cols="30" disabled> </textarea> </form> <form action="submit.htm" onsubmit="return validate_form(this)" method="post" name="submitting"> Name: <input type="text" name="Name" size="30"> <br> <br> Surname: <input type="text" name="Surname" size="30"><br><br> Email: <input type="text" name="email" size="30"><br> <form action="submit.htm" onSubmit="return validate_form(this)" method="post"> <input type="submit" value="Submit" > </form> </body> I have two arrays that are tied together Ink1Data[][InkID] and Ink1Data[][Ink1Desc] I also have this Javascript code to validate it: Code: var chksink1 = document.getElementsByName("Ink1Data[][InkID]"); for (var i = 0; i < chksink1.length; i++) { switch (chksink1[i]) { case (chksink1.value=1); var i1Desc = "Ink1Data["+i+"][Ink1Desc]"; if (validate_required(i1Desc,"Please fill in a trim size.")==false) {i1Desc.focus();return false;} break; case (chksink1.value=2); var i1Desc = "Ink1Data["+i+"][Ink1Desc]"; if (validate_required(i1Desc,"Please fill in folding instructions.")==false) {i1Desc.focus();return false;} break; case (chksink1.value=3); var i1Desc = "Ink1Data["+i+"][Ink1Desc]"; if (validate_required(i1Desc,"Please fill in scoring instructions.")==false) {i1Desc.focus();return false;} break; } } basically, I want to count how many are in the array (will be the same number for both) and then depending on the value of the first array, validate the second and kick an appropriate error if necessary. it should be pretty easy, but I can't seem to get the code to work. Is there anyone that could please help me figure this out? Thank you! I want to validate two a date range using javascript, so that my program would check startdate less than end date. The below function only check the year, and it works. Code: function validate() { var start=document.entry.datum1.value; year = start.substr(0, 4); month = start.substr(5, 2); dayval = start.substr(8, 2); var end=document.entry.datum2.value; year1 = end.substr(0, 4); month1 = end.substr(5, 2); dayval1 = end.substr(8, 2); var myDate=new Date(); myDate.setFullYear(year,month,dayval); var today = new Date(); today.setFullYear(year1,month1,dayval1); if (myDate> today) { alert("The start date must come before the end date"); return false } return true; } But I have write a function for checking the whole date value and it didnt work. My date is in format- 2008-10-23(yyyy-mm-dd) Code: function validate() { var start=entry.datum1.value; year = start.substr(0, 4); month = start.substr(5, 2); dayval = start.substr(8, 2); intyear = parseInt(year, 10); intmonth = parseInt(month, 10); intdayval = parseInt(dayval, 10); var end=entry.datum2.value; year1 = end.substr(0, 4); month1 = end.substr(5, 2); dayval1 = end.substr(8, 2); intyear1 = parseInt(year1, 10); intmonth1 = parseInt(month1, 10); intdayval1 = parseInt(dayval1, 10); var startDate = Date.parse(intyear,intdayval,intmonth); var endDate = Date.parse(intyear1,intdayval1,intmonth1); if (startDate > endDate) { alert("The start date must come before the end date"); return false; } return true; } Please help |