JavaScript - New To Javascript And Have A Validation Error
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 + "' > "); Similar Tutorialsthis is how i call the editor: Code: <!-- editor --> <? include "js/editor/buttons.php"; ?> <iframe id="textbox" class="Eddietor" src="js/editor/editor.php"></iframe><br /> <input type="hidden" id="content" name="content"> <!-- /editor --> and this is editor.js: Code: window.onload = function() { Editor = document.getElementById('textbox').contentWindow.document; Editor.designMode = "on"; document.forms[0].onsubmit = function() { var text = document.getElementById('text'); text.value = Editor.body.innerHTML; } } function doColor(colour) { document.getElementById("textbox").contentWindow.focus(); document.getElementById("textbox").contentWindow.document.execCommand("forecolor",false, colour); } function doClick(command) { document.getElementById("textbox").contentWindow.focus(); document.getElementById("textbox").contentWindow.document.execCommand(command, false, null); } function doLink() { var mylink = prompt("URL:", "http://"); if ((mylink != null) && (mylink != "")) { document.getElementById("textbox").contentWindow.focus(); document.getElementById('textbox').contentWindow.document.execCommand("CreateLink",false,mylink); } } function doImage() { myimg = prompt('URL:', 'http://'); document.getElementById("textbox").contentWindow.focus(); document.getElementById('textbox').contentWindow.document.execCommand("InsertImage", false, myimg); } another script i made is having problems with the ID="textbox" , it might be fixed if i change id and start using name="textbox" instead, but i don't know how to do this in js. need to edit the editor.js and change id="textbox"->to->name="textbox" can anyone help me? i got no idea how to use the getElementByName thingie , i'm trying to do this for 4 hours already and still no go. appreciated. Hello, Am new to this forum, as you can see this is my first post. Am having problem in validating my form, so i like you guys to help me out. Code: <html> <head> <title>Javascript form Validation</title> <script language="javascript"> <!-- function formValid() { var user = ducument.getElementById('userid'); var email = document.getElementById('emailid'); var select = document.getElementById('selection'); if(check_restrict(user,6,10)){ if(check_email(email,'Invalid Email address')){ if(check_select(select,'Please make a selection')){ return true; } } } return false; } function check_restrict(elem,min,max){ if(elem.value.length >= min && elem.value.length <= max){ return true; } else{ alert("Please enter " +min+ " to " +max+ "character") elem.focus(); return false; } } function check_email(elem,helperMsg){ var emailExp = /^[a-z0-9A-Z\.\-\_]+\@[a-zA-Z\-\.]+\.[a-zA-Z\.]{2,3}$/; if(elem.value.match(emailExp)){ return true; } else{ alert(helperMsg) elem.focus(); return false; } } function check_select(elem,helperMsg){ if(elem.value == "Please Choose"){ alert(helperMsg) elem.focus(); return false; } else{ return true; } } //--> </script> </head> <body> <form name="f1" onsubmit="return formValid()"> Username(6-10):<input type="text" id="userid" size=10 maxlength="15"><br/> Email Address:<input type="text" id="emailid" size=20 maxlength="20"><br/> <select id="selection"> <option>Please Choose</option> <option>Login</option> <option>Register</option> </select><br/> <input type="submit" value="Submit"> </form> </body> </html> Any help we be appreciated. Regards. Hi, I have placed a form validation script in my HTML and I think its all in the right place, however, when i load the page an error appears saying can not get object. Once I click past it, the form validation works as normal. Not sure how to get rid of this error. I have placed the link to the external validation script in the document head Any ideas? HTML Code: <div class="mb_content"> <h2>Work</h2> <div class="mb_content_inner"> <p>IMAGES COMING SOON.</p> </div> </div> <div class="mb_content"> <h2>Contact</h2> <p class="con_details_tel">tel: </p> <p class="con_details_email">email: </p> <div class="mb_content_inner"> <form id='contactus' name='contactus' action='<?php echo $formproc->GetSelfScript(); ?>' method='post' accept-charset='UTF-8'> <fieldset > <input type='hidden' name='submitted' id='submitted' value='1'/> <input type='hidden' name='<?php echo $formproc->GetFormIDInputName(); ?>' value='<?php echo $formproc->GetFormIDInputValue(); ?>'/> <input type='text' class='spmhidip' name='<?php echo $formproc->GetSpamTrapInputName(); ?>' /> <div><span class='error'><?php echo $formproc->GetErrorMessage(); ?></span></div> <div class='container'> <label for='name' >Name: </label><br/> <input type='text' name='name' id='name' value='<?php echo $formproc->SafeDisplay('name') ?>' maxlength="50" /><br/> <span id='contactus_name_errorloc' class='error'></span> </div> <div class='container'> <label for='email' >Email:</label><br/> <input type='text' name='email' id='email' value='<?php echo $formproc->SafeDisplay('email') ?>' maxlength="50" /><br/> <span id='contactus_email_errorloc' class='error'></span> </div> <div class='container'> <label for='message' >Message:</label><br/> <span id='contactus_message_errorloc' class='error'></span> <textarea name='message' id='message'><?php echo $formproc->SafeDisplay('message') ?></textarea> </div> <div class='container'> <input type='submit' name='Submit' value='Submit' /> </div> </fieldset> </form> <script type='text/javascript'> var frmvalidator = new Validator('contactus'); frmvalidator.EnableOnPageErrorDisplay(); frmvalidator.EnableMsgsTogether(); frmvalidator.addValidation("name","req","Please provide your name"); frmvalidator.addValidation("email","req","Please provide your email address"); frmvalidator.addValidation("email","email","Please provide a valid email address"); frmvalidator.addValidation("message","maxlen=2048","The message is too long!(more than 2KB!)"); </script> </div> </div> </div> Here is the start of the javascript that is producing the error:- Code: function Validator(frmname) { this.validate_on_killfocus = false; this.formobj = document.forms[frmname]; if (!this.formobj) { alert("Error: couldnot get Form object " + frmname); return; } Can anyone help? Thanks nevblanc79 I'm trying to output something in a separate div if the information entered in the form is invalid. It is simply not working, no errors. Code: <script type="text/javascript" language="javascript"> function validateIGN(ign) { var validign = /^[a-zA-Z0-9]{1,30}$/; if (!validign.test(ign)) { document.getElementById.ignErrors.innerHTML = "<p>Your IGN is not formatted properly."; } else { } } </script> Heres the HTML where the onkeyup is.. Code: <form name= "newsletter" class="newsletter" action="doNewsletter.php" method="post"> <h2>Fill out this form if you want to be notified when the website is up!</h2><br/> <center><table class="twoslot"> <tr> <td>IGN(In Game Name):</td><td><input type="text" name="ign" onkeyup="return validateIGN(newsletter.ign.value);" /></td> </tr> <br/> <tr> <td>E-mail:</td><td><input type="text" name="email" /></td> </tr> <br/> <tr> <td> <center> <input type="submit" value="Submit" /> </center> </td> </tr> </table></center> <span style="font-size: .5em;">This is not working yet</span> </form> i have following code for edit news Code: <%@ Language="VBScript" %> <% Option Explicit %> <html> <head><title>News Management System - Update News</title> <script type="text/javascript"> <!-- var dtCh= "/"; var minYear=1900; var maxYear=2100; var EDate = (Date()); var endDate = Date.parse(EDate); endDate = endDate - 86400000 function isInteger(s){ var i; for (i = 0; i < s.length; i++){ // Check that current character is number. var c = s.charAt(i); if (((c < "0") || (c > "9"))) return false; } // All characters are numbers. return true; } function stripCharsInBag(s, bag){ var i; var returnString = ""; // Search through string's characters one by one. // If character is not in bag, append to returnString. for (i = 0; i < s.length; i++){ var c = s.charAt(i); if (bag.indexOf(c) == -1) returnString += c; } return returnString; } function daysInFebruary (year){ // February has 29 days in any year evenly divisible by four, // EXCEPT for centurial years which are not also divisible by 400. return (((year % 4 == 0) && ( (!(year % 100 == 0)) || (year % 400 == 0))) ? 29 : 28 ); } function DaysArray(n) { for (var i = 1; i <= n; i++) { this[i] = 31 if (i==4 || i==6 || i==9 || i==11) {this[i] = 30} if (i==2) {this[i] = 29} } return this } function isDate(dtStr){ var daysInMonth = DaysArray(12) var pos1=dtStr.indexOf(dtCh) var pos2=dtStr.indexOf(dtCh,pos1+1) var strMonth=dtStr.substring(0,pos1) var strDay=dtStr.substring(pos1+1,pos2) var strYear=dtStr.substring(pos2+1) strYr=strYear if (strDay.charAt(0)=="0" && strDay.length>1) strDay=strDay.substring(1) if (strMonth.charAt(0)=="0" && strMonth.length>1) strMonth=strMonth.substring(1) for (var i = 1; i <= 3; i++) { if (strYr.charAt(0)=="0" && strYr.length>1) strYr=strYr.substring(1) } month=parseInt(strMonth) day=parseInt(strDay) year=parseInt(strYr) if (pos1==-1 || pos2==-1){ return "The date format should be : mm/dd/yyyy"; } if (strMonth.length<1 || month<1 || month>12){ return "Please enter a valid month"; } if (strDay.length<1 || day<1 || day>31 || (month==2 && day>daysInFebruary(year)) || day > daysInMonth[month]){ return "Please enter a valid day"; } if (strYear.length != 4 || year==0 || year<minYear || year>maxYear){ return "Please enter a valid 4 digit year between "+minYear+" and "+maxYear; } if (dtStr.indexOf(dtCh,pos2+1)!=-1 || isInteger(stripCharsInBag(dtStr, dtCh))==false){ return "Please enter a valid date"; } return ''; } //--> </script> <script type="text/javascript"> function Submitme() { var _message=''; var _errorEarlier=false; if(document.frm.newstitle.value == "") { _errorEarlier = true; _message = 'Please enter news title'; } if(document.frm.newsbody.value == "") { if (_errorEarlier){_message += "\r\nPlease enter news detail";} else{_errorEarlier = true;_message = "Please enter news detail";} } if(document.frm.newsdate.value == "") { if (_errorEarlier){_message += "\r\nPlease todays or future date";} else{_errorEarlier = true;_message = "Please todays or future date";} } var dt=document.frm.newsdate var SDate = frm.newsdate.value; var FormDate = Date.parse(SDate); var dateError = isDate(dt.value); if (dateError != ''){ if (_errorEarlier){_message += "\r\n" + dateError;} else{_errorEarlier = true;_message = dateError;} } else if(FormDate < endDate ) { if (_errorEarlier){_message += "\r\nPlease ensure that the Entered Date is greater than or equal to the Todays Date.";} else{_errorEarlier = true;_message = "Please ensure that the Entered Date is greater than or equal to the Todays Date.";} } if (_errorEarlier) { alert(_message);return false; } else { document.frm.action="update_record.asp"; document.frm.submit(); } } </script> <script type="text/javascript"> <!-- function isAlpha(keyCode) { if(keyCode==16) isShift = True; var res = ((keyCode >= 65 && keyCode <= 90) || keyCode == 8 || keyCode == 32) if (!res) document.getElementById("lblAlpha").style.visibility = "visible"; else document.getElementById("lblAlpha").style.visibility = "hidden"; return res; } //--> </script> </head> <body> <% 'declare you variables Dim SQL, connection, recordset,newstitle,newsbody,newsdate Dim sConnString, ID 'receive the id of the record passed through querystring ID=request.querystring("ID") 'Declare the SQL statement that will query the database SQL="SELECT * FROM latestNews WHERE ID=" & ID 'Create an ADO connection and recordset object Set Connection = Server.CreateObject("ADODB.Connection") Set Recordset = Server.CreateObject("ADODB.Recordset") 'define the connection string, specify database 'driver and the location of database sConnString="PROVIDER=Microsoft.Jet.OLEDB.4.0;" & _ "Data Source=" & Server.MapPath("news_data.mdb") 'Open the connection to our database Connection.Open(sConnString) 'Open the recordset object, execute the SQL statement 'and return the record with the id that was sent recordset.Open SQL,connection %> <div align='center'> <table width="370" border="0" cellspacing="0" cellpadding="0" align="center"> <tr align="left" valign="top"> <td> <div align="center"> <p> </p> <!-- start the html form --> <form method="post" action="update_record.asp" name="form"> <input type="hidden" name="id" value="<%= recordset("id")%>"> <table border="2" bordercolor="#CCCCFF" cellspacing="0" cellpadding="4"> <tr> <td> News Title</td> <td> <input id="txtAlpha" type="text" name="newstitle" value="<%= recordset("newstitle")%>" size="50" class="cssborder" onkeyup="keyUP(event.keyCode)" onkeydown="return isAlpha(event.keyCode);" onpaste="return false;" /> </td> <td> <span id="lblAlpha" style="color: Red; font-size: 10pt; font-family: Arial; visibility: hidden;"> * Only Alphabets</span> </td> </tr> <tr> <td valign="top"> News Text</td> <td> <textarea cols="50" rows="8" name="newsbody" class="cssborder"><%= recordset("newsbody")%></textarea></td> </tr> <tr> <td> News Date</td> <td> <input type="text" name="newsdate" value="<%= recordset("newsdate")%>" size="12" class="cssborder"><font color="#CC0000">(mm/dd/yyyy)</font></td> </tr> <tr> <td colspan="2"> <input type="hidden" name="id" value="<%=id%>"> <input type="hidden" name="ispostback" value="1"> <input type="submit" value="update" class="cssborder" onclick="return Submitme();" /> </table> <br> <br> </form> <!-- end the html form --> </div> </td> </tr> </table> </div> <% 'close the connection and recordset objects recordset.Close Set recordset=Nothing connection.Close Set connection=Nothing %> </body> </html> but when i leave blank all fields it cannot check them. and submit the form without displaying any error. wht wrong in this code?? I'm facing a validation error, whenever I leave any of the fields blank, it gives me a warning and then it redirects me to (index.php?option=com_ccnewsletter&view=ccnewsletter) What I wanna know is how can I freeze the page until all fields are filled? This is the javascript code: Code: <script type="text/javascript"> function formsubmit(task) { var form = document.subscribeFormModule; if(task == "addSubscriber") { if(form.name.value== "") { alert('<?php echo $parameters['namewarning']; ?>'); } else if(form.email.value == "") { alert('<?php echo $parameters['emailwarning']; ?>'); } else if(( form.email.value.search("@") == -1) || ( form.email.value.search("[.*]" ) == -1 )) { alert('<?php echo $parameters['emailwarning']; ?>'); } <?php if($parameters['showterm']) { ?> else if(form.terms_condition_ch.checked == false) { alert ('<?php echo $parameters['terms_cond_warn']; ?>'); } <?php } ?> else { form.task.value = "addSubscriber"; form.submit(); } } else if(task == "removeSubscriberByEmail") { if(form.email.value == "") { alert('<?php echo $parameters['emailwarning']; ?>'); } else if(( form.email.value.search("@") == -1) || ( form.email.value.search("[.*]" ) == -1 )) { alert('<?php echo $parameters['emailwarning']; ?>'); } else { form.task.value = "removeSubscriberByEmail"; form.submit(); } } } </script> And this is the form's code: Code: <div class="mainnewsletter"> <p><?php echo $parameters['introduction'] ?></p> <div class="module" style="padding-top: 0px;"> <div class="normalsublayout"> <form class="form-login" action="<?php echo JRoute::_('index.php?option=com_ccnewsletter&view=ccnewsletter');?>" method="post" name="subscribeFormModule" id="subscribeFormModule"> <p><div> <?php echo $parameters['name']; ?>: <div class="username-block"> <div class="input-field-l"> <input class="inputbox" type="text" onblur="if(this.value=='') this.value='YourName';" onfocus="if(this.value=='YourName') this.value='';" name="name" id="name" value="<?php echo $name; ?>" /> </div></div> </div> </p> <p> <div> <?php echo $parameters['email']; ?>: <div class="password-block"> <div class="input-field-l"> <input class="inputbox" type="text" onblur="if(this.value=='') this.value='youremail@domain.com';" onfocus="if(this.value=='youremail@domain.com') this.value='';" name="email" id="email" size="15" maxlength="35" value="<?php echo $email; ?>" /> </div> </div> </div> </p> <?php if($parameters['showterm']) { ?> <p> <input id="ccnewsletter" name="terms_condition_ch" class="inputbox" type="checkbox"> <a style="font-size:14px;color:#4E4E51; display: margin:0px 0px 0px 5px;text-decoration:none;" href='<?php echo $cid; ?>' class="modal" rel="{handler: 'iframe', size: {x: 700, y: 375}}"><?php echo $terms;?></a> </p> <?php } if($unsubscribe) { ?> <p> <input class="button" type="submit" id="addSubscriber" name="addSubscriber" value="<?php echo $parameters['subscribe']; ?>" onclick="formsubmit('addSubscriber');"/> </p> <p><input class="button" type="submit" id="removeSubscriberByEmail" name="removeSubscriberByEmail" value="<?php echo $parameters['unsubscribe']; ?>" onclick="formsubmit('removeSubscriberByEmail');"/> </p> <?php } else { ?><div class="readon-wrap1"> <div class="readon1-l"></div> <span class="readon-main"><span class="readon1-m"><span class="readon1-r"><input class="button" type="submit" id="addSubscriber" name="addSubscriber" value="<?php echo $parameters['subscribe']; ?>" onclick="formsubmit('addSubscriber');"/></span></span></span></div> <!--<p><center><input type="image" src="images/back_f2.png" id="addSubscriber" name="addSubscriber" value="<?php echo $parameters['subscribe']; ?>" onclick="formsubmit('addSubscriber');"/></center></p>--> <?php } ?> <input type="hidden" name="option" value="com_ccnewsletter" /> <!--<input type="hidden" name="task" value="addSubscriber" />--> <input type="hidden" name="task" value="" /> </form> </div> </div></div> I don't know, maybe I'm missing something because it was working fine a before. You may not beable to help but I could not find any where else.. I am getting this error when i submit my form without the email address.. Attribute validation error for tag CFMAIL. The value of the attribute FROM is invalid. The length of the string, 0 character(s), must be greater than or equal to 1 character(s). The error occurred in \\NAWINFS02\home\users\web\b153\rh.chadwickorchids\name\name.cfm: line 2 1 : <cfmail 2 : from="#form.visitor_email#" 3 : to="orders@chadwickorchids.com;#form.visitor_email#" 4 : subject="Chadwick Orchids Name Your Own Orchid" How can I have this script go back to the form if it generates a error instead of going to the coldfussion error? please help Hi all. I am using the Inline Form Validation Engine jQuery plugin found here, and though I have posted at their forum as well, am having a heck of a time (not being well versed in js OR Ajax, unfortunately) All I need to do is edit the code so that when the onSubmit function is processed, it returns only the first error it encounters, rather than keeping and display the array of every error. I have picked through the code several times, and can't seem to find where the array is stored. I thought perhaps I could find a for loop to limit, but am at a complete loss. Is there anyone out there who can help? I can post the code if needed; I didn't want to post the entire file (since I don't know which snippet is the one I need!) Thank you in advance! hello i have a form which when the user hits "submit," the info in the textboxes is entered to a database. the only textbox which is not entered to the DB is an "age" textbox, which i need to verify to see if user is 18yrs or older. if user is not 18 years or older, they get an alert telling them they arent 18+. if they are, then the form submits this is my code so far, and i dont get any alerts when i enter an age younger than 18: Code: <head> <script language="text/javascript"> var age; document.getElementById("userage").value = age; if (age >=18) document.location="feedbacksaveanddisplay.php"; else { alert('Sorry, we can not let you in!') document.location="content.html"; } </script> </head> <form method = "post" action = "FeedbackSaveAndDisplay.php"> <input type = "hidden" name = "user" value = "test"/> <input type = "hidden" name = "pwd" value = "test"/> <p>Enter your name, feedback, score</p> <table> <tr> <td>Name</td> <td> <input type = "text" name = "name" style="width:150px; height:20px;" /> </td> </tr> <tr> <td>Feedback</td> <td> <input type = "text" name = "feedback" style="width:150px; height:20px;" /> </td> </tr> <tr> <td>Score</td> <td> <input type = "text" name = "score" style="width:150px; height:20px;" /> </td> </tr> <tr> <td>Product</td> <td> <input type = "text" name = "product" style="width:150px; height:20px;" /> </td> </tr> <tr> <td>Age</td> <td> <input type = "text" name = "age" style="width:150px; height:20px;" /> </td> </tr> <tr> <td colspan = "2"> <input type = "submit" value = "Submit" /> </td> </tr> </table> </form> any tips/advice on how to fix my code? the problem i think is in the javascript... will greatly appreciate any help thanks!! I'm having trouble figuring out this code. I have a isInitialsTextValid function that checks to see if the user enters their initials in the correct format. Then I have a function checkInitials. In the checkInitials function I am supposed (1)to declare a variable to be used for the boolean value returned by the isInitialsTextValid function.(2)call the isInitialsTextValid function.(3)If the value returned is false, place focus back on initials textbox.(4)If the value return is true call the submit function. I'm not sure what I am doing wrong, but I get a checkInitials is no defined error from firefox and it is pointing to my xhtml file. Here is the relevant code. XHTML FILE Code: <!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> <title>Form Example</title> <script type = "text/javascript" src= "Lab17.js"> </script> </head> <body onload="giveInitFocus();"> <form name = "form1" action = ""> <p> <input type = "button" value = "Total Cost" onClick = "checkInitials();" /> <input type = "reset" value = "Reset Order Form" name = "reset" /> </p> <hr /> <p> Please Enter the Cashier's Initials. </p> <p> <label> Cashier's Initials: <input type = "text" name = "initials" id = "initials" /></label> </p> <p> JAVASCRIPT FILE Code: function isInitialsTextValid() { var init = document.form1.initials; var position = init.value.search(/^[A-Z]{2,3}$/); if(position !=0) { alert("Initials must be 2 or 3 capital letters" + "\n Please re-enter"); return false; } else return true; } function checkInitials() { var returned; isInitialsTextValid(); if(returned == false) { document.form1.initials.focus(); } else if(returned == true) { handleSubmitClick(); } } 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> 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> 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) 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> 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 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 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 I have an issue with a form I am creating, I have many check boxs where at least one of the 2 needs to be selected and the final one has to be selected for the submit button to become active Code: <form id="form1" action="#" method="post"> One <input type="checkbox" name="value1" onMouseDown='submit_form()'/> Two<input type="checkbox" name="value2" onMouseDown='submit_form()'/> //atleast 1 of these 2 has to be selected Three<input type="checkbox" name="value3" onMouseDown='submit_form()'/> //this 1 has to be selected <input type="submit" name="submit" value="submit" id="submit" disabled="disabled"/> this is the javascript I have atm to do this Code: function submit_form(){ if (form1.value1.checked == false || form1.value2.checked == false) { document.getElementById(submit); orderForm.submit.disabled=false; } } i cant seem to get this to work, forgetting about the 3rd checkbox for now any help would be greatly appreciated! |