JavaScript - Form Validation & Html W3c Validation
Hello all, new here Seems like a very nice place to be apart of.
I have my website www.gebcn.com. If you view source you will see all that I have done, but more importantly my problem. I have the JS code at the top there and I am unable to W3C validate my HTML because of the JS. I am using XHTML strict and would like to stay using it. The JS I have at the top is my form validation code. I am able to do any validating that I need with this "snippet" of code, I have shrank it from my library version just to use for this newsletter. Until now W3C validating was not important now for some reason it is and I am faced with this problem. I am not a Javascript guy more of a HTML/CSS guy and I can manipulate JS to suit my needs. <problem> I have tried to make this "snippet" of JS code an external file but receive multiple errors with the JS calling for the FORM NAME as it is not on the same page. The form NAME=NEWSLETTER is another problem, as W3C says I am unable to use attribute "NAME" in this location. <problem> I would like to keep the JS close to how it is now as I have a library to use this JS over and over again. Any pointers in the right direction or solutions to my problem would be greatly appreciated. Thanks! Hopefully it is not to hard huh If there is anything anyone needs, the code pasted here, or anything else please let me know. Thanks again! Similar TutorialsHello. I want to validate via javascript an input text box. What i want is to have at least two words ( not letters ). At this moment i did validation to detect if the input is empy: <script> function validateForm() { var x=document.forms["myForm"]["s"].value if (x==null || x=="") { alert("Nu ati introdus nimic."); return false; } } </script> But how to validate to have at leat two words inside my input area. Thank you. Here is my form: <form name="myForm" method="get" id="searchform" onsubmit="return validateForm()" action="<?php bloginfo('home'); ?>/"> <div><input type="text" value="" name="s" id="s" /> <input type="hidden" name="cat" value="19" /> <input type="submit" id="searchsubmit" value="Cauta document" /> </div> </form> Hi I am trying to write a simple script for html form validation before going on to write a more complicated script for the full form which will eventually be on the web page. However, I cannot tell if the javascript is executing or not, as no alert messages come up. If I fill in the form with blanks (which is what the function checkform() checks for) then it should display an alert on submission and return false. Otherwise, returns true. I need to get this licked before going on to the more complex coding, but I really can't see why this doesn't appear to work. I'd be most grateful if some kind soul out there could have a look at it for me.... Links below. Thank you in anticipation! http://www.kellyresources.co.uk/onli...ment_test.html http://www.kellyresources.co.uk/checkform.js Hi all Can someone please help me with a javascript that can validate textfields, checkboxes, radiobuttons and dropdownlist? I found a working javascript, but it only validates textfields. http://www.insidedhtml.com/tips/elements/ts13/page1.asp Can someone please help me modify it? Any help is much appreciated! - Mikey Hey all. I have a simple validation I need to do. I need to just make sure that a Checkbox is checked, and that a Text field has content. Sounds simple but I cannot find any thing that has a check and a text field. Here what I have. Can I modify this script to do this? A Checkbox MUST be checked and Text field MUST be filled out. This currently does the text field fine, but no Checkbox obviously. How can I add a checkbox validation to this? Thats it. Any help is appreciated. Code: <script type="text/javascript"> var textFields = ["digsig"]; function validateForm( ) { var oops = ""; // must initialize this! var form = document.sig; for ( var t = 0; t < textFields.length; ++t ) { var field = form[textFields[t]]; var value = field.value.replace(/^\s+/,"").replace(/\s+$/,""); // trim the input if ( value.length < 1 ) { oops += "You MUST enter your Digital Signature"; } } if ( oops != "" ) { alert("ERROR:" + oops); return false; } } } </script> I've literally tried everything. Read 26 tutorials, interchanged code, etc. My validation functions all work. My AJAX functions work (tested manually using servlet URL's). The second servlet validates the reCaptcha form that's generated on my webpage. After the form is validated, even if everything's correct, nothing happens upon clicking submit. I even have an alert pop up if with the captcha result, just for middle-layer debugging purposes. I want to do all of my validation clientside; none serverside. However, going to be tough if I can't get my god damn form to submit. I've been puzzled by this for close to 36 hours straight. I can't see, and I'm going to get some rest and hope that there is some useful insight on my problem when I return. html form: Code: <form id="f1" name="form1" onsubmit="validate_form(this); return false;" action="register" method="post"> <table cellspacing="5" style="border: 2px solid black;"> <tr> <td valign="top"> <table cellspacing="5"> <tr> <td>*First name</td> <td align="right"><span id="valid_one"></span></td> <td><input type="text" style="width: 320px;" id="fn" name="fn" onBlur="validate_one();"></td> </tr> <tr> <td align="left">*Last name</td> <td align="right"><span id="valid_two"></span></td> <td><input type="text" style="width: 320px;" id="ln" name="ln" onBlur="validate_two();"></td> </tr> <tr> <td align="left">*Email address</td> <td align="right"><span id="result"></span></td> <td><input type="text" style="width: 320px;" id="mailfield" name="email" onBlur="startRequest();"></td> </tr> <tr> <td align="left">*Phone number</td> <td align="right"><span id="valid_three"></span></td> <td><input type="text" style="width: 320px;" id="pn" name="pn" onBlur="validate_three();"></td> </tr> <tr> <td align="left">*City/Town</td> <td align="right"><span id="valid_four"></span></td> <td><input type="text" style="width: 320px;" id="c" name="c" onBlur="validate_four();"></td> </tr> <tr> <td></td> <td></td> <td> <select name="s"> <option value="AL">Alabama <option value="AK">Alaska <option value="AZ">Arizona <option value="AR">Arkansas <option value="CA">California <option value="CO">Colorado <option value="CT">Connecticut <option value="DE">Delaware <option value="FL">Florida <option value="GA">Georgia <option value="HI">Hawaii <option value="ID">Idaho <option value="IL">Illinois <option value="IN">Indiana <option value="IA">Iowa <option value="KS">Kansas <option value="KY">Kentucky <option value="LA">Louisiana <option value="ME">Maine <option value="MD">Maryland <option value="MA">Massachusetts <option value="MI">Michigan <option value="MN">Minnesota <option value="MS">Mississippi <option value="MO">Missouri <option value="MT">Montana <option value="NE">Nebraska <option value="NV">Nevada <option value="NH">New Hampshire <option value="NJ">New Jersey <option value="NM">New Mexico <option value="NY">New York <option value="MC">North Carolina <option value="ND">North Dakota <option value="OH">Ohio <option value="OK">Oklahoma <option value="OR">Oregon <option value="PA">Pennsylvania <option value="RI">Rhode Island <option value="SC">South Carolina <option value="SD">South Dakota <option value="TN">Tennessee <option value="TX">Texas <option value="UT">Utah <option value="VT">Vermont <option value="VA">Virginia <option value="WA">Washington <option value="WV">West Virginia <option value="WI">Wisconsin <option value="WY">Wyoming </select> </td> </tr> <tr> <td> <br> </td> </tr> <tr> <td></td> <td></td> <td><span id="error"></span></td> </tr> <tr> <td valign="top">*Anti-Spam Verification</td> <td></td> <td id="reCaptcha"></td> </tr> </table> </td> <td valign="top"> <table cellspacing="5"> <tr> <td align="left">*Affiliation</td> <td align="right"><span id="valid_five"></span></td> <td><input type="text" style="width: 320px;" id="affl" name="affl" onBlur="validate_five();"></td> </tr> <tr> <td align="left">*Research Area:</td> <td align="right"><span id="valid_six"></span></td> <td><input type="text" style="width: 320px;" id="ra" name="ra" onBlur="validate_six();"></td> </tr> <tr> <td valign="top" align="left">*Research Overview</td> <td align="right"><span id="valid_seven"></span></td> <td><textarea cols="38" rows="6" id="ro" name="ro" onKeyDown="limitText(this.form.ro,this.form.countdown,500)" onKeyUp="limitText(this.form.ro,this.form.countdown,500)" onBlur="validate_seven();"></textarea></td> </tr> <tr> <td></td> <td></td> <td><font size="1">You have <input readonly type="text" name="countdown" size="1" value="500"> characters remaining.</font></td> </tr> <tr> <td align="left">*Talk Availability</td> <td></td> <td> <input type="radio" name="ta" value="In person">In person <input type="radio" name="ta" value="Online">Online <input type="radio" name="ta" value="Both" checked>Both </td> </tr> <tr> <td align="left" valign="top">Links</td> <td></td> <td> <table id="linkTable" border="0"> <td><input type="text" style="width: 320px;" name="link"></td> <td><div id="result"></div></td> </table> </td> <td align="left" valign="top"><input type="button" value="Add Link" onclick="addLink('linkTable')"></td> </tr> <tr> <td></td> <td><span style="color: red;"></span></td> </tr> </table> </td> </tr> </table> <br /> <input type="submit" id="submit" name="submit" value="Submit Form"> </form> Javascript file: Code: /* * script.js - ajax and table functions */ var xmlHttp; // global instance of XMLHttpRequest var xmlHttp2; // second for captcha functions var validAjax = new Boolean(); var validCaptcha = new Boolean(); var valid_one = new Boolean(); var valid_two = new Boolean(); var valid_three = new Boolean(); var valid_four = new Boolean(); var valid_five = new Boolean(); var valid_six = new Boolean(); var valid_seven = new Boolean(); function init() { showRecaptcha('reCaptcha'); // Separate booleans for AJAX funcs validAjax = false; validCaptcha = false; // Booleanse for fields that don't require servlet validation valid_one = false; valid_two = false; valid_three = false; valid_four = false; valid_five = false; valid_six = false; valid_seven = false; } function showRecaptcha(element) { Recaptcha.create("6Le1a8ESAAAAAGtxX0miZ2bMg0Wymltnth7IG-Mj", element, {theme: "red", callback: Recaptcha.focus_response_field}); } function validate_form() { if (valid_one && valid_two && valid_three && valid_four && validEmail) { startCaptchaRequest(); if (validCaptcha) { return true; } } else { alert("Submission contains errors. Please fill out all required fields before submitting."); return false; } } function validate_one() { if (document.getElementById("fn").value == 0) { valid_one = false; document.getElementById("valid_one").innerHTML = "No"; } else { valid_one = true; document.getElementById("valid_one").innerHTML = ""; } } function validate_two() { if (document.getElementById("ln").value == 0) { valid_two = false; document.getElementById("valid_two").innerHTML = "No"; } else { valid_two = true; document.getElementById("valid_two").innerHTML = ""; } } function validate_three() { if (document.getElementById("pn").value == 0) { valid_three = false; document.getElementById("valid_three").innerHTML = "No"; } else { valid_three = true; document.getElementById("valid_three").innerHTML = ""; } } function validate_four() { if (document.getElementById("c").value == 0) { valid_four = false; document.getElementById("valid_four").innerHTML = "No"; } else { valid_four = true; document.getElementById("valid_four").innerHTML = ""; } } function validate_five() { if (document.getElementById("affl").value == 0) { valid_five = false; document.getElementById("valid_five").innerHTML = "No"; } else { valid_five = true; document.getElementById("valid_five").innerHTML = ""; } } // //function validate_six() { // if (document.getElementById("ra").value == 0) { // valid_six = false; // document.getElementById("valid_six").innerHTML = "No"; // } // else { // valid_six = true; // document.getElementById("valid_six").innerHTML = ""; // } //} // //function validate_seven() { // if (document.getElementById("ro").value == 0) { // valid_seven = false; // document.getElementById("valid_seven").innerHTML = "No"; // } // else { // valid_seven = true; // document.getElementById("valid_seven").innerHTML = ""; // } //} function addLink(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "text"; element1.name = "link" + rowCount; element1.style.width = "320px"; cell.appendChild(element1); } function limitText(limitField, limitCount, limitNum) { if (limitField.value.length > limitNum) { limitField.value = limitField.value.substring(0, limitNum); } else { limitCount.value = limitNum - limitField.value.length; } } function createXmlHttpRequest() { if(window.ActiveXObject) { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp=new XMLHttpRequest(); } } function startRequest() { createXmlHttpRequest(); var param1 = document.getElementById('mailfield').value; if (param1 == "") { validEmail = false; document.getElementById("result").innerHTML = "Blank"; } else { xmlHttp.open("GET", "http://localhost:1979/PolarSpeakers/servlet/mailCheck.do?e=" + param1, true) xmlHttp.onreadystatechange = handleStateChange; xmlHttp.send(null); } } function handleStateChange() { if(xmlHttp.readyState==4) { if(xmlHttp.status==200) { var message = xmlHttp.responseXML .getElementsByTagName("valid")[0] .childNodes[0].nodeValue; if (message == "Unregistered") { validEmail = true; document.getElementById("result").style.color = "green"; } else { validEmail = false; document.getElementById("result").style.color = "red"; } document.getElementById("result").innerHTML = message; } else { alert("Error checking e-mail address - " + xmlHttp.status + " : " + xmlHttp.statusText); } } } function createCaptchaRequest() { if(window.ActiveXObject) { xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP"); } else if(window.XMLHttpRequest) { xmlHttp2=new XMLHttpRequest(); } } function startCaptchaRequest() { alert('made it to captcha requeswt'); createCaptchaRequest(); var param1 = Recaptcha.get_challenge(); var param2 = Recaptcha.get_response(); xmlHttp2.open("POST", "http://localhost:1979/PolarSpeakers/servlet/captchaCheck.do?c=" + param1 + "&r=" + param2, true) xmlHttp2.onreadystatechange = handleStateChangeCaptcha; xmlHttp2.send(null); } function handleStateChangeCaptcha() { if(xmlHttp2.readyState==4) { if(xmlHttp2.status==200) { var message = xmlHttp2.responseXML .getElementsByTagName("result")[0] .childNodes[0].nodeValue; if (message == "Valid") { alert("captcha valid"); validCaptcha = true; } else { document.getElementById("error").innerHTML = message; validCaptcha = false; } } else { alert("Error checking captcha validity - " + xmlHttp2.status + " : " + xmlHttp2.statusText); } } } I've set up a mock registration form page so I can learn a bit about javascript's form validation. (newbie) I want to try to attempt to style the border of a form field green when the user enters the correct info into the form text field and red on all other fields if the user doesnt enter any info into them. When i test it, enter the right info into the username field, leave the others blank, and hit the submit button it styles the username field green ok but it doesnt make the next fields (password and so on) red. Could someone please explain what I am doing wrong? here is my code so far... Note: just for testing purposes I've put return false on everything so it displays a message when everythings ok. Code: .... <script type="text/javascript"> window.onload = function() { document.forms[0].username.focus(); } function validate(form) { var form = document.getElementById("reg"); var e = document.getElementById("error"); e.style.background = "red"; for(var i = 0; i < form.elements.length; i++) { var el = form.elements[i]; if(el.type == "text" || el.type == "password") { if(el.value == "") { e.innerHTML = "Please fill in all fields!"; el.style.border = "1px solid red"; el.focus(); return false; } else { el.style.border = "1px solid green"; return false; } } } var un = form.username; un.value = un.value.replace(/^\s+|\s+$/g,""); if((un.value.length < 3)|| (/[^a-z0-9\_]/gi.test(un.value))) { e.innerHTML = "Only letters,numbers and the underscore are allowed (no spaces) - 3-16 characters"; un.focus(); return false; } var pw = form.password; pw.value = pw.value.replace(/^\s+|\s+$/g,""); if((pw.value.length < 3) || (/[^a-z0-9]/gi.test(pw.value))) { e.innerHTML = "Only letters and numbers are allowed (no spaces) - 3-16 characters"; pw.focus(); return false; } e.innerHTML = "You filled in all the fields, well done!"; e.style.background = "green"; return false; } </script> </head> <body> <div id="wrapper"> <div id="header"> <h1>My Cool Website</h1> </div> <div id="content"> <div class="padding"> <h2>Registration</h2> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p> <form id="reg" action="#" method="post" onsubmit="return validate(this)"> <div id="error"></div> <div><label for="username">Username</label></div> <div><input type="text" name="username" id="username" size="30" maxlength="16" /></div> <div><label for="password">Password</label></div> <div><input type="password" name="password" id="password" size="30" maxlength="16" /></div> <div><label for="c_password">Confirm Password</label></div> <div><input type="password" name="c_password" id="c_password" size="30" maxlength="16" /></div> <div><label for="email">Email address</label></div> <div><input type="text" name="email" id="email" size="30" maxlength="200" /></div> <div><label for="c_email">Confirm Email address</label></div> <div><input type="text" name="c_email" id="c_email" size="30" maxlength="200" /></div> <div><label for="firstname">First name</label></div> <div><input type="text" name="firstname" id="firstname" size="30" maxlength="100" /></div> <div><label for="surname">Surname</label></div> <div><input type="text" name="surname" id="surname" size="30" maxlength="100" /></div> <div><label for="gender">Gender</label></div> <div> <div><input type="radio" name="gender" id="gender" value="m" checked="checked" />Male</div> <div><input type="radio" name="gender" value="f" />Female</div> </div> <div><input type="submit" value="Register" name="submit" /></div> </form> </div> </div> <div id="footer"> <p>Copyright © 2009 My Cool Website</p> </div> </div> </body> </html> Hi, I have a working contact form with 3 of the fields requiring validation and they work well. I have added extra fields to the form (StatusClass, Project, CameFrom). These 3 fields return fine but I need to validated them. My problem is that the new fields don't show in the behaviours/validate panel even though they are within the form tag. Can anyone give me any help and advice as to how to accomplish this? Many thanks Code below.... Code: <script type="text/JavaScript"> <!-- function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_validateForm() { //v4.0 var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments; for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]); if (val) { nm=val.name; if ((val=val.value)!="") { if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@'); if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n'; } else if (test!='R') { num = parseFloat(val); if (isNaN(val)) errors+='- '+nm+' must contain a number.\n'; if (test.indexOf('inRange') != -1) { p=test.indexOf(':'); min=test.substring(8,p); max=test.substring(p+1); if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n'; } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; } } if (errors) alert('The following error(s) occurred:\n'+errors); document.MM_returnValue = (errors == ''); } //--> </script > Code: <form action="contact_us.asp" method="post" name="contact" target="_parent" class="contentText" id="contact" onsubmit="MM_validateForm('FullName','','R','Telephone','','RisNum','Email','','RisEmail');return document.MM_returnValue"> <table width="100%" border="0" cellspacing="5" cellpadding="0"> <tr> <td width="54%" class="subHeader">Full Name* </td> <td width="46%" class="subHeader"><input name="FullName" type="text" id="FullName" /></td> </tr> <tr> <td class="subHeader">Company Name </td> <td class="subHeader"><input name="CompanyName" type="text" id="CompanyName" /></td> </tr> <tr> <td class="subHeader">Address</td> <td class="subHeader"><input name="Address1" type="text" id="Address1" /></td> </tr> <tr> <td class="subHeader"> </td> <td class="subHeader"><input name="Address2" type="text" id="Address2" /></td> </tr> <tr> <td class="subHeader"> </td> <td class="subHeader"><input name="Address3" type="text" id="Address3" /></td> </tr> <tr> <td class="subHeader">Postcode</td> <td class="subHeader"><input name="Postcode" type="text" id="Postcode" /></td> </tr> <tr> <td class="subHeader">Telephone Number* </td> <td class="subHeader"><input name="Telephone" type="text" id="Telephone" /></td> </tr> <tr> <td class="subHeader">Mobile Number </td> <td class="subHeader"><input name="Mobile" type="text" id="Mobile" /></td> </tr> <tr> <td height="25" class="subHeader">Email Address* </td> <td class="subHeader"><input name="Email" type="text" id="Email" /></td> </tr> <tr> <td height="30" class="subHeader">Status*</td> <td class="subHeader"><select name="StatusClass" id="StatusClass"> <option selected="selected">Please Choose</option> <option>Architect</option> <option>Interior Designer</option> <option>Private Client</option> <option>Student</option> <option>Trade Enquiry</option> </select> </td> </tr> <tr> <td height="23" class="subHeader">Project*</td> <td class="subHeader"><select name="Project" size="1" id="Project"> <option selected="selected">Please Choose</option> <option>Planning Stages</option> <option>New Build</option> <option>Refurbishment</option> <option>Barn Conversion</option> <option>No project - information only</option> </select> </td> </tr> <tr> <td height="37" class="subHeader">How did you hear about us?*</td> <td class="subHeader"><select name="CameFrom" size="1" id="CameFrom"> <option selected="selected">Please Choose</option> <option>Web Search</option> <option>Grand Designs</option> <option>Living Etc</option> <option>Home Building & Renovation</option> <option>Architect</option> <option>Friend/Family</option> <option>Magazine/Editorial</option> <option>Newspaper Article</option> <option>Trade Show/Exhibition</option> <option>Other</option> </select></td> </tr> <tr> <td height="24" class="subHeader">Brochure Request </td> <td class="subHeader"><input name="Brochure" type="checkbox" id="Brochure" value="checkbox" /></td> </tr> <tr> <td class="subHeader">Message</td> <td class="subHeader"><span class="style4"> <textarea name="Message" id="Message"></textarea> </span></td> </tr> <tr> <td class="subHeader"> </td> <td class="subHeader"><input name="Submit" type="submit" value="Submit" /></td> </tr> <tr> <td colspan="2" class="subHeader"><em>* Required fields</em></td> </tr> </table> </form> Hi guys, Been stuck for a few days with this scenario. Any help? The alert box appears on an error. But the submitting won't stop. The details are submitted and the form is processed. Any help is greatly appreciated... Code: <html> <head> <script type="text/javascript" src="email_helper/jscripts/tiny_mce/tiny_mce.js"></script> <script type="text/javascript"> tinyMCE.init({ // General options mode : "textareas", theme : "simple" }); </script> <script language="javascript"> function MM_openBrWindow(theURL,winName,features) { window.open(theURL,winName,features); } function err_check(){ var email = document.getElementById('to_email').value; if(email.length==0){ alert('Please Enter Email Address'); return false; } var AtPos = email.indexOf("@") var StopPos = email.lastIndexOf(".") if (AtPos == -1 || StopPos == -1) { alert("Please Enter Valid Email Address"); document.getElementById('email').focus(); return false; } email = document.getElementById('cc_email').value; if(email.length != 0){ var AtPos = email.indexOf("@") var StopPos = email.lastIndexOf(".") if (AtPos == -1 || StopPos == -1) { alert("Please Enter Valid Email Address"); document.getElementById('email').focus(); return false; } } var answer = confirm ("Send E-Mail?"); if (!answer){ return false; } } </script> <!-- /TinyMCE --> <style type="text/css"> body, table, td, th{ background-color:#CCCCCC; font-family: Arial; font-size:14px; } .que{ font-weight:bold; } </style> </head> <body> <form method="post" enctype="multipart/form-data"> <?php include 'library/database.php'; include 'library/opendb.php'; $query = mysql_query("SELECT email,contact,mobile FROM users WHERE user_id='$uid'") or die(mysql_error()); $row = mysql_fetch_row($query); $from_email = $row[0]; $from_person = $row[1]; $from_mobile = $row[2]; $query = mysql_query("SELECT customer_id FROM campaign_summary WHERE camp_id='$camp_id'") or die(mysql_error()); $row = mysql_fetch_row($query); $cusid = $row[0]; $query = mysql_query("SELECT email FROM client_info WHERE comp_id='$cusid'") or die(mysql_error()); $row = mysql_fetch_row($query); $toer = $row[0]; include 'library/closedb.php'; ?> <table width="100%" border="0"> <tr><td rowspan="4"><input type="submit" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" /><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr> <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" value="<?php echo $toer;?>"/></td></tr> <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr> <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr> <tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" checked /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td> </tr> <tr> <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td> <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr> <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td> <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr> <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr> <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3"> <textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%"> <?php echo "<br><br><br>" . $from_person . "<br>" . $from_mobile; ?> </textarea> </td></tr> </table> </form> </body> </html> Hello all, I have a multistep jquery form that validates user input and then should send me an email. Problem is, right now, I can only get it to validate the first page, then it sends the email before the rest of the pages are viewed. I'm just trying to delay the submission of the form until the "submit_fourth" button is pressed. I've got $25 via paypal for the one who sticks with this one for long enough to come up with a workable solution. Here is my code... I know it's a lot, but I wasn't sure how much would be helpful. HTML code is in the second post in this thread (it was just too much to fit in one go). Cheers! -Dave The Javascript: Code: $(function validateForm(){ //original field values var field_values = { //id : value 'name' : 'your name', 'email' : 'email', 'phone' : '(555) 123-4567', 'other' : 'other', 'detail' : 'project overview' }; //inputfocus $('input#name').inputfocus({ value: field_values['name'] }); $('input#email').inputfocus({ value: field_values['email'] }); $('input#phone').inputfocus({ value: field_values['phone'] }); $('input#other').inputfocus({ value: field_values['other'] }); $('input#detail').inputfocus({ value: field_values['detail'] }); //reset progress bar $('#progress').css('width','0'); $('#progress_text').html('0% Complete'); //first_step $('form').submit(function(){ }); $('#submit_first').click(function(){ //remove classes $('#first_step input').removeClass('error').removeClass('valid'); //ckeck if inputs aren't empty var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields1 = $('#first_step input[type=text]'); var error = 0; fields1.each(function(){ var value = $(this).val(); if( value.length<5 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(error <= 0) { //update progress bar $('#progress_text').html('25% Complete'); $('#progress').css('width','85px'); //slide steps $('#first_step').slideUp(); $('#second_step').slideDown(); } else return false; }); $('#back_second').click(function(){ //update progress bar $('#progress_text').html('0% Complete'); $('#progress').css('width','0px'); //slide steps $('#second_step').slideUp(); $('#first_step').slideDown(); }); $('#submit_second').click(function(){ //remove classes $('#second_step input').removeClass('error').removeClass('valid'); var fields2 = $('#second_step input[textarea]'); var error = 0; fields2.each(function(){ var value = $(this).val(); if( value.length<5 || value==field_values[$(this).attr('id')] ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(error <= 0) { //update progress bar $('#progress_text').html('50% Complete'); $('#progress').css('width','170px'); //slide steps $('#second_step').slideUp(); $('#third_step').slideDown(); } else return false; }); $('#back_third').click(function(){ //update progress bar $('#progress_text').html('25% Complete'); $('#progress').css('width','85px'); //slide steps $('#third_step').slideUp(); $('#second_step').slideDown(); }); $('#submit_third').click(function(){ //update progress bar $('#progress_text').html('75% Complete'); $('#progress').css('width','255px'); //prepare the fourth step var fields3 = new Array( $('#time').val(), $('#budget').val() ); var fields2half = new Array( $('#detail').val() ); var fields2 = new Array( $('#other').val(), $('#pages').val() ); var fields1 = new Array( $('#name').val(), $('#email').val(), $('#phone').val(), $('#contact').val(), $('#url').val() ); var tr = $('#fourth_step tr'); tr.each(function(){ //alert( fields[$(this).index()] ) $(this).children('.1 td:nth-child(2)').html(fields1[$(this).index()]); $(this).children('.2 td:nth-child(2)').html(fields2[$(this).index()]); $(this).children('.2half td:nth-child(2)').html(fields2half[$(this).index()]); $(this).children('.3 td:nth-child(2)').html(fields3[$(this).index()]); }); //slide steps $('#third_step').slideUp(); $('#fourth_step').slideDown(); }); $('#back_fourth').click(function(){ //update progress bar $('#progress_text').html('50% Complete'); $('#progress').css('width','170px'); //slide steps $('#fourth_step').slideUp(); $('#third_step').slideDown(); }); $('#submit_fourth').click(function(){ //send information to server //update progress bar $('#progress_text').html('100% Complete'); $('#progress').css('width','339px'); //slide steps $('#fifth_step').slideUp(); $('#fourth_step').slideDown(); if(error <= 0) { return true } else{ return false } }); }); I'm having trouble changing the font color of my labels ONLY when I stop the form from submitting due to blank fields. I'm not sure whether if just changing my CSS will achieve what I want, or am I going to have to add something to my if else statement, or both? I would think I would need to change CSS to : label.onfocus { color:red; } but a little confused on what else. Any help would be appreciated! Code: <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Adam's Form Validation</title> <script type="text/javascript"> //<![CDATA[ function validate() { var errors = new Array( ); for( var x = 0 ; x < document.forms[ 0 ].elements.length ; x++ ) { if( document.forms[ 0 ].elements[ x ].type == "text" ) { if (document.forms[ 0 ].elements[ x ].value == "") { errors.push("*"+"The " + document.forms[ 0 ].elements[ x ].name + "field cannot be blank\n"); document.forms[ 0 ].elements[ x ].className = "in_error"; } } if( document.forms[ 0 ].elements[ x ].type == "select-one" ) { if(document.forms[ 0 ].elements[ x ].selectedIndex !== 2) { errors.push("*"+"The " + document.forms[ 0 ].elements[ x ].name + " field cannot be blank\n"); document.forms[ 0 ].elements[ x ].className = "in_error"; } } } if( errors.length == 0 ) { return true; } else { clear_errors( ); show_errors( errors ); return false; } } function clear_errors( ) { var div = document.getElementById( "errors" ); while (div.hasChildNodes( ) ) { div.removeChild(div.firstChild); } } function show_errors( errors ) { var div= document.getElementById( "errors" ); for( var x = 0 ; x < errors.length ; x++) { var error = document.createTextNode( errors[ x ] ); var p = document.createElement( "p" ); p.appendChild( error); div.appendChild( p ); } } window.onload = function () { document.forms[ 0 ].onsubmit = validate; } //]]> </script> <style type="text/css" media="screen"> #errors { color: #F00; } .in_error { border: 2px outset #f00; } </style> </head> <body> <h1>Adam's Form Validation</h1> <div id="errors"></div> <form action="http://ingenio.us.com/examples/echo" method="post"> <p> <label for="firstname">First Name: </label> <input type="text" name="firstname" value="" id="firstname"/> </p> <p> <label for="lastname">Last Name: </label> <input type="text" name="lastname" value="" id="lastname"/> </p> <p> <label for="middle">Middle Inital: </label> <input type="text" name="middle" value="" id="middle" maxlength="1" size="4"/> </p> <p> <label for="address">Street Address: </label> <input type="text" name="address" value="" id="address"/> </p> <p> <label for="city">City: </label> <input type="text" name="city" value="" id="city"/> </p> <p> <label for="state">State: </label> <input type="text" name="state" value="" id="state" maxlength="2" size="4"/> </p> <p> <label for="zip">Zip Code: </label> <input type="text" name="zip" value="" id="zip" maxlength="5" size="7"/> </p> <p> <label for="username">User Name: </label> <input type="text" name="username" value="" id="username"/> </p> <p> <label for="password">Password: </label> <input type="text" name="password" value="" id="password"/> </p> <p> <label for="password2">Confirm Password: </label> <input type="text" name="password2" value="" id="password2"/> </p> <p> <label for="agreement">Terms and Conditions:</label> <select name="agreement" id="agreement"> <option></option> <option>No, I have not read the user agreement</option> <option>Yes, I have read and understand the user agreement</option> </select> </p> <p> <input type="submit" value="Register"/></p> </form> </body> </html> Hello everyone, I found a form on this page http://sbpoley.home.xs4all.nl/webmatters/formval.html and I want to make something like that.. could someone please tell me the javascript code this. it doesnt have to be the entire code. just one texfield so I can see how it's done. I want to make a form where it validates while the user is entering the information... just like that example. thanks! I am trying to create a form and validate it so that when the user enters their details, it doesn't let them confirm if the details are not filled out or incorrect. I am trying to use document.getElementById and labels, so instead of alerts appearing, a label appears next to the field that is required. I also am trying to validate the email to make sure the '@' and the '.' is in the right place.
I need a code so when a user clicks the 'Send!' button, the information on the form is sent to an e-mail address. I'm not entirely sure on the best method to do this, if you have any ideas that'd be great VALIDATION: Validation checks need to be carried out on the onClick event of the 'send' command button. E-mail field: Standard e-mail validation needed, so it must include a @ and a . in order to be accepted. Query field: Must contain some text. No limit or minimum requirement. The reply check box doesn't need any validation, but if it's checked, the email that gets sent needs to have an indication of this. Thanks for any help Hi everyone, this is my first thread on the forum. . I am having issues with a form I am trying to validate. It validates on a remote server (WAMP) I have set up on my laptop but when I attempt it on another server it will not work. The code is as follows: <script type="text/javascript"> function validateForm() { var x=document.forms["pass"]["npass"].value var y=document.forms["pass"]["password"].value if (x==null || x=="") { alert("Please enter your new password"); return false; } if (y==null || y=="") { alert ("Please confirm your new password"); return false; } else alert("Some message"); } </script> <form name="pass" action="#" method="post" onsubmit="validateForm()"> <input name="npass" type="password"> <input name="password" type="password"> <input type="submit" value="Submit"> My browser is also configured to accept javascript. Any help would be very much appreciated. Thanks in advance, tdsrogers Hi, I am doing a form validation where the form fields are dynamically created.. I need to show errormessages(Instead of alert messages) for the fields which fails validation... For time being I have created a dummy hardcoded form to test validation... The classnames could be named as "mandatory|date" mandatory|email etc... or it can be null or it can be only named as email,date,numbers etc.... So Here I need to either 1) alert the label values and show corresponding error messages(eg.. Name should not be empty, email should not be empty etc... 2) Display error messages next to the field which fails validation... But also please keep it in mind that the div id for each fields would be same... So is there any way to get this done even thru DOM scripting..? For reference please find the attachment... Please help... Hi all, I am trying to get a form to validate when the submit button is clicked. If I use this method with an <input type="submit"> it works fine, the validation runs and if there are no errors, the form submits: Code: <form name="form" class="form" id="Form" method="post" action="contact/send_email.php" onsubmit="return validate.check(this); "> <label for="Full_Name" accesskey="U">Your Name <span>*</span></label> <input name="Full_Name" type="text" id="Full_Name" /> <label for="Email_Address" accesskey="E">Email <span>*</span></label <input name="Email_Address" type="text" id="Email_Address" /> <label for="Telephone_Number" accesskey="P">Phone <span>*</span></label> <input name="Telephone_Number" type="text" id="Telephone_Number" /> <label for="Your_Message" accesskey="C">Message <span>*</span></label> <textarea name="Your_Message" id="Your_Message"></textarea> <input name="contactus" type="submit" class="submitbutton" id="contactus" value="Send Email" /> <p class="required"><span>*</span><i> denotes required fields.</i></p> </form> However, if i try to use a link to submit the form,the validation will not run: Code: <form name="form" class="form" id="Form" method="post" action="contact/send_email.php" onsubmit="return validate.check(this); "> <label for="Full_Name" accesskey="U">Your Name <span>*</span></label> <input name="Full_Name" type="text" id="Full_Name" /> <label for="Email_Address" accesskey="E">Email <span>*</span></label <input name="Email_Address" type="text" id="Email_Address" /> <label for="Telephone_Number" accesskey="P">Phone <span>*</span></label> <input name="Telephone_Number" type="text" id="Telephone_Number" /> <label for="Your_Message" accesskey="C">Message <span>*</span></label> <textarea name="Your_Message" id="Your_Message"></textarea> <div class="btns"><a href="#" class="button1" onclick="document.form.submit();return false;">Send Email</a></div> <p class="required"><span>*</span><i> denotes required fields.</i></p> </form> I'm very new to js so any help would be greatly appreciated. Thanks Chris For my class activity(home work) I need validate a form which has several fields. I have created the form (html) and wrote some codes for validation. I want all my form fields display help text when they get focused and when the user enter invalid data display error text(not alert). All my help text are working. but error text are not. I wrote on focus and on blur events and functions for each field. But every time I preview it on IE I am getting "object expected error" I carefully checked all the element Id and those are okay. Please help me. function myFocusHandler(e) { var newClassName; var eventTarget; if (e.target) { eventTarget = e.target; } else if (e.srcElement) { eventTarget = e.srcElement; } else { eventTarget = window.event.srcElement; } if (e.type == "focus" ) { newClassName = "helpshow"; eventTarget.className = 'inputfocus'; } else if (e.type == "blur" ) { newClassName = "helphide"; eventTarget.className = 'inputblur'; } var relatedSpansId = eventTarget.id + "help"; document.getElementById(relatedSpansId).className = newClassName; } function errorshow(elementId) { var relatedSpansId = elementId + "error"; document.getElementById(relatedSpansId).className = "errorshow"; function hideError(elementId) { var relatedSpansId= elementId + "error"; document.getElementById(relatedSpansId).className = "errorhide"; } function validateAllFields() { var isemailOK = false; var isformValid = true; var email=document.getElementById("email"); IsemailOK=IsemailValid(); if (IsemailOK == false) { formIsValid = false; errorshow("email"); } else { errorhide("email"); } return formIsValid; } function isemailValid() { var emailIsValid=false; var emailElement; var emailValue; emailElement = document.getElementById("email"); emailValue = emailElement.value; if (emaiValue== "/^[0-9A-Za-z\.\-_]+@([0-9A-Za-z\-_]+\.)+[A-Za-z]{2,}$/") { emailIsValid=true; }else{ emailIsValid=false; } return emailIsValid; function validateemail(event) { myFocusHnadler(event); var isemailOK = false; isemailOK=isemailValid(); if(emailOK == false) { errorshow("email"); }else{ erroehide("email"); } } Hi, I am trying to make a form check two fields (using regular expressions) and then submit. So far I have created my expressions but i cant get the form to validate correctly! I seem to get the error associated with the loyalty card rather than the postcode check. Any help would be appreciated My code is: <script type="text/javascript"> function validate(postalCode) { var re = new RegExp(/^([a-zA-Z]{2}[0-9]{1,2})|([0-9]{2}[a-zA-Z]{1,2})$/); var str = postalCode.value; if (re.test(str)) return true; else { alert("That is not a valid postcode. Please verify your input."); return false; } } function validate(cardNumber) { var re = new RegExp(/^([a-zA-Z]{1}[a-zA-Z0-9]{4})([a-zA-Z0-9]{5})([a-zA-Z0-9]{3})([0-9]{1}[!&@?]{1})$/); var str = cardNumber.value; if (re.test(str)) return true; else { alert("That is not a valid card number. Please verify your input."); return false; } } </script> <html> <form id="order" action= "" method="post" > <table cellpadding="5"> <tr> <td>Postal Code</td> <td><input type="text" name="postalCode" maxlength= "30" /></td> </tr> <tr> <td>Loyalty card</td> <td><input type="text" name="cardNumber" maxlength= "30" /></td> </tr> <input id = "submit" type="submit" value="Submit" onclick="validate(postalCode); validate(cardNumber)" /> </td> </form> </html> Hi i got a script that validates the fields username and password, can anybody check if this code for checking the username and password for illegal characters is ok or if i need to change it. thanks kimbo Code: addLoadEvent (function() { document.entryform.onsubmit = validateEntry; }); function validateEntry() { var errorMsg = ""; if (document.getElementById("username").value <= "") { errorMsg += "Please enter your username.\n"; } if (document.getElementById("password").value == "") { errorMsg += "Please enter your email password\n"; } else { if (!document.getElementById("username").value.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/)) { errorMsg += "invalid characters.\n"; } if (!document.getElementById("password").value.match(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/)) { errorMsg += "invalid characters.\n"; } } if (errorMsg == "") { return true; } else { alert(errorMsg); return false; } } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func(); } } } So, I've tried to get this working but i'm stumped. I'm trying to write some form validation... see below Code: function validateForm() { var x=document.forms["useraccount"]["firstname"].value if (x==null || x=="") { document.getElementById("errorfirstname").innerHTML="enter first name"; return false; } else { document.getElementById("errorfirstname").innerHTML=""; } var x=document.forms["useraccount"]["lastname"].value if (x==null || x=="") { document.getElementById("errorlastname").innerHTML="enter last name"; return false; } else { document.getElementById("errorlastname").innerHTML=""; } } and then in my html i have <div id="errorfirstname"></div> <div id="errorlastname"></div> etc.. and onsubmit="validateform()" in the form. It sort of works.. it shows the errors if i submit the form with empty fields, but then if i enter data into them, the only the 'first name' field will make my error message disappear. for the 'last name', once the error message appears.. (ie, enter last name') it will not clear the message (as it should with document.getElementById("errorlastname").innerHTML="" any help would be great. thanks. |