JavaScript - Blank Field Validation Ignored By Ff And Ie
Hello, I have a three field contact form on an HTML5 page. Using CSS3/HTML5 techniques, the fields change state as the info is entered properly (green OK symbol if good, red "!" if not, etc). That all works as expected in all browsers.
My final hurdle is preventing the form being submitted with nothing entered in the fields. I have done hours of research and have tried several ways of writing the checkFeedbackForm function. My problem is that none of the solutions I've found are recognized by FireFox (mac and pc) and IE. They just ignore the javascript and allow the empty form to be emailed. Here is the code that is checking the fields: Code: <script type="text/javascript"> function checkFeedbackForm(form){ if(form.fullname.value=='') { alert('Please enter your Name'); form.fullname.focus(); return false; } if(form.email.value=='') { alert('Please enter a valid Email address'); form.email.focus(); return false; } if(form.message.value=='') { alert('Please tell me a little bit about your ideas.'); form.message.focus(); return false; } return true; } </script> Here is my form: Code: <form id="signup" action="mailinfo.php" method="post" onSubmit="return checkFeedbackForm(this);" > <input type="hidden" name="returnURL" value="thankyou.html" /> <fieldset><ol> <li><label for="fullname">Name</label> <input type="text" id="fullname" name="fullname" placeholder="Your name" required /></li> <li><label for="email">Email</label> <input type="email" id="email" name="email" placeholder="Your email" title="Please enter a valid email" required /></li> <li><label for="message">Message</label> <textarea id="message" name="message" cols="32" rows="8" placeholder="Your message" required /></textarea></li></ol> </fieldset> <input type="submit" value="Send It" /> <div class="privacy">Your information is for our project only and will not be shared or sold. Promise.</div> </form> Through experimentation, I have found that removing the ID from the form allows the javascript to function in all browsers, but that kills my form styling. I think it will be easier to fix the javascript than redo my CSS. This may be obvious, but I'm not a programmer. I'm a designer who muddles through on small scale stuff like this. Any help is greatly appreciated. Thanks. Similar TutorialsHey 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> My Javascript doesn't display an error when the "bid" field is blank but I want it to. Can someone help me fix it? Everything else works okay but I'm not a Javascript programmer so I don't know where to begin. Code: function checkBid(fieldName,minValue,maxValue){ var numberfield = fieldName; if (chkNumeric(fieldName,minValue,maxValue) == false){ numberfield.select(); numberfield.focus(); return false; } else{ return true; } } function chkNumeric(fieldName,minValue,maxValue){ var checkOK = "0123456789"; var checkStr = fieldName; var allValid = true; var decPoints = 0; var allNum = ""; for (i = 0; i < checkStr.value.length; i++){ ch = checkStr.value.charAt(i); for (j = 0; j < checkOK.length; j++) if (ch == checkOK.charAt(j)) break; if (j == checkOK.length){ allValid = false; break; } if (ch != ",") allNum += ch; } if (!allValid){ alertsay = "The bid field contains one or more invalid characters:\nPlease use only numeric digits in this field ...\n " alert(alertsay); return (false); } var chkVal = allNum; var prsVal = parseInt(allNum); if (chkVal != "" && !(prsVal >= minValue && prsVal <= maxValue)){ alertsay = "Your bid value is outside the acceptable bidding range:\nPlease enter a value from "+minValue+" to "+maxValue+" ...\n " alert(alertsay); return (false); } } Hello, I am trying to create a function that tests to see if the text field that I create in my markup contains numbers. Please help. Thank you. Code: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"> <title>New Page 2</title> </head> <script type="text/javascript"> var strWord = document.myForm.txtWord.value; function validateWord() { while(strWord == document.formname.myForm.value.length > 8 && var ichars = "PJ" ); { alert ("OK."); } } </SCRIPT> <form name="myForm" action="" method="" onsubmit="return false"> <p> <input name="txtWord" size="25" value="Enter Word Here"> </p> <p> <input type="button" value="Validate The Word" name="cmdValidateWord" onclick ="validateWord()"> </p> </html> Hi, I'm having trouble getting this code to work. It needs to check if the user has entered the correct characters into a field. A valid word should have a P at the start, and contain a J somewhere in it. If the word is valid, a box pops up saying "OK" once the user has clicked the ValidateWord button. It also needs to keep this kind of structure (ie. a while construct & validated through pressing a button). This is purely for personal education about performance of "while" constructs for field validation. Any help is hugely appreciated. Hi, I want to pop up message incase of validation failure of form field. If I use document.write("name shold be between 2 to 15 char only") it redirects to new page and gives this message.......... if I use alert than incase or 2 or more validation fail it gives multiple or one by one alert boxes. I want to to displey my message near to field............... Code: function validateForm() { var x=document.forms["regform"]["email_id"].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; } } Hi, My code seems to work individually it is when I try to do multiple input validation that everything goes wrong. I have tried at the moment to cut it down to just two validation inputs to simplify things, but the more I try and play around with it the worse it seems to get. I know a lot of people post about this but I have tried comparing to other people's codes and solutions and just can't work out what is wrong. I would be incredibly grateful for any help. Code: <html> <title>Sign Up</title> <head> <script type="text/javascript"> 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_fname(field,alerttxt) { with (field) { if (fname=="enter firstname" OR fname="") {alert(alerttxt);return false;} else {return true;} } } function validate_form(thisform) { with (thisform) { if (validate_email(email,"The email address you entered is not a valid email address!")==false) {email.focus();return false;} else {return true;} } { if (validate_fname(fname,"Please enter your firstname!")==false) {cemail.focus();return false;} else {return true;} } } </script> </head> <body> <form action="userdetails" id="signupForm" onsubmit="return validate_form(this)" method="post"> <fieldset class="two"> <legend>Your Information:</legend> <br /> <br /> <label class="two">First name:</label> <input type="text" class="input" required="required" name="fname" value="enter firstname" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter firstname':this.value;" size="30%" /> <br /> <br /> <label class="two">Email:</label> <input type="text" class="input" name="email" value="enter email address" onclick="this.value='';" onfocus="this.select()" onblur="this.value=!this.value?'enter email address':this.value;" size="30%" /> <br /> <br /> </fieldset> <br /> <br /> <input type="submit" value="Submit"/> </form> </body> </html> I have a phone number field on my form that needs validation, but I'm not sure how to code this. I have the following function to validate a first name is entered and last name. The phone number field must match a 7 digit or 10 digit(with area code)phone number. I want to be able to include paranthese and/or hyphens for the valid phone number. function checkForm1() { if (document.forms[0].firstname.value.length == 0) { alert("You must put in a first name"); return false; } else if (document.forms[0].lastname.value.length == 0) { alert("You must put in a last name"); return false; } Hello Everyone, I need to add some sort of validation that will only allow users to upload .jpg files. I really need to add this to an existing script I've already written. I've seen scripts and tutorials that add the jpg validation but only incorporate the image field of the form. I need the script to validate several forms in the field, not just one. When I try to add validation for the jpg field to the follow script everything stops working. Can someone please point me in the right direction? Thanks! Code: <form id="uploadForm" method=post class="upload" action=submit_script.php enctype='multipart/form-data' onsubmit="return validate_form(this)"> <p><b>First Name</b><br/> <INPUT TYPE="TEXT" NAME="name_first" size="40"></p> <p><b>Last Name</b><br/> <INPUT TYPE="TEXT" NAME="name_last" size="40"></p> <p><b>School Name</b><br/> <INPUT TYPE="TEXT" NAME="name_school" size="40"></p> <p><b>Your School E-Mail</b><font class="super">1</font><br/> <INPUT TYPE="TEXT" NAME="school_email" size="40"></p> <p><b>Your File</b><font class="super">4,5</font><br/> <input id="userfile1" name="userfile1" type="file" size="30"></p> <p><input name="upload" type="submit" class="box" id="upload" value="Submit Your Poster" onClick="YAHOO.example.container.wait.show();"></p> </form> Code: function validate_required_field(field,alertText) { with (field) { if (value==null||value=="") { YAHOO.example.container.wait.hide(); alert(alertText); return false; } else { return true; } } } function validate_email(field,alertText) { with (field) { apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2) { YAHOO.example.container.wait.hide(); alert(alertText); return false; } else { return true; } } } function validate_form(thisform) { with (thisform) { if (validate_required_field(name_first,"Please enter a value in the 'First Name' field before continuing")==false) { name_first.focus(); return false } } with (thisform) { if (validate_required_field(name_last,"Please enter a value in the 'Last Name' field before continuing")==false) { name_last.focus(); return false } } with (thisform) { if (validate_required_field(name_school,"Please enter a value in the 'School Name' field before continuing")==false) { name_school.focus(); return false } } with (thisform) { if (validate_required_field(school_email,"Please enter a value in the 'School Email' field before continuing")==false) { school_email.focus(); return false } } with (thisform) { if (validate_email(school_email,"Please enter a valid email address before continuing")==false) { school_email.focus(); return false } } } I'm only validating one (Consent) radio button with this code but i need to validate multiple different questions/buttons. Code: <script> function getRBtnName(GrpName) { var sel = document.getElementsByName(GrpName); var fnd = -1; var str = ''; for (var i=0; i<sel.length; i++) { if (sel[i].checked == true) { str = sel[i].value; fnd = i; } } return fnd; } function checkForm() { var chosen = getRBtnName('Consent'); if (chosen < 0) { alert( "Please choose one answer when you are asked to select a number." ); return false; } else { return true; } } </script> <form action="congratulations_aff.php" method="post" name="congratulations_aff" onSubmit="return checkForm()"> <table border="0" cellspacing="1" cellpadding="0"> <tr> <td colspan="3">I consent to providing my electronic signature.</p></td> </tr> <tr> <td colspan="3" valign="top"> <input type="radio" name="Consent" value="Y" /> Yes <input type="radio" name="Consent" value="N" /> No <table border="0" cellspacing="1" cellpadding="0"> <tr> <td>I consent to electronic receipt of my information reporting documentation.</td> </tr> <tr> <td valign="top"> <input type="radio" name="Consent1099YesNo" value="Y" /> Yes <input type="radio" name="Consent1099YesNo" value="N" /> No</td> </tr> <tr> <td valign="top"> For tax purposes are you a U.S. citizen, U.S. resident, U.S. partnership, or U.S. corporation? <input type="radio" name="USPersonYesNo" value="Y" /> Yes <input type="radio" name="USPersonYesNo" value="N" /> No</tr> </table> <input type="submit" value="submit" value="Submit" /> </form> Any help would be greatly appreciated. I am Gururaj. I have written a form in HTML which contains username,lastname,email,password and submit. I have written a javascript to validate this form [validate(username,lastname,email,password)]. On submit this javascript function will be called and hence form get validated. I am passing all the arguements(username,lastname,email and password) to the javascript function.. Is it possible to make me a code such that it should call an individual function for each field in the form.for ex:if i have not entered username, last name in the form and attempt to submit, only username arguement should be passed to the function as it comes first in the form. In other sense i want to validate individual text field validation of my form. So can anybody help me.It will be very needful to me. I am finishing up my Form page, and totally forgot to have a numeric only field. So I added it and I can't get it to work. I also am having issues throwing an error when you don't select at least one topping. And are these lines correct? Code: document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value); Code: document.cookie = "extra=" + encodeURIComponent(extra); Here is a link to the page hosted on my dropbox http://dl.dropbox.com/u/49211616/dw/...orderPage.html Javascript: Code: function validateOrder () { var crustSelection = document.orderForm.crust.value; var crustPrice; //Adds $1 for Deep DishParmesagn, and Sourdough var count = 0; //Amount of Toppings Selected var choice = ""; //Toppings Selected list var x = ""; //Don't need for the Cookie var extra = 0; //extra charge for toppings over 3 try{ var error = ""; // Initialize Var to store the error messages. if(document.getElementById("delivery").checked != true && document.getElementById("takeout").checked != true) { error=error+"Order Type is required.\n" } if(document.getElementById("fname").value == "") { error = error + "First Name is required.\n"; } if(document.getElementById("lname").value == "") { error = error + "Last Name is required.\n"; } if(document.getElementById("address").value == "") { error = error + "Street address is required.\n"; } if (isNaN(document.getElementById("quantity"))) { error = error + "Enter Pizza Quantity in Numbers Only.\n"; } if(document.getElementById("crust").value == "") { error = error + "Crust Type is required.\n"; } if(document.getElementsByName("toppings").value == 0) { error = error + "Select at Least One Topping.\n"; } if(error == "") { // save all the information in the cookie document.cookie = "firstName=" + encodeURIComponent(document.getElementById("fname").value); document.cookie = "lastName=" + encodeURIComponent(document.getElementById("lname").value); document.cookie = "address=" + encodeURIComponent(document.getElementById("address").value); document.cookie = "order=" + encodeURIComponent((document.getElementById("delivery").checked) ? "delivery" : "takeout"); document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value); document.cookie = "quantity=" + encodeURIComponent(document.getElementById("quantity").value); document.cookie = "crust=" + encodeURIComponent(document.getElementById("crust").value); document.cookie = "toppings=" + encodeURIComponent(document.getElementsByName("toppings[]").value); alert("Order successfully Placed!"); } else { alert(error); } } catch(ex) { alert("An error occurred!.\n" + "Error Name : " + ex.name + "\nError Message : " + ex.message); } for (var i=1; i<11; i++) { x = document.orderForm['toppings' + i].value; if (document.orderForm['toppings' + i].checked) { choice = choice + " " + x ; count ++; } } if (choice.length <= 0) { choice = choice + "NONE"; } if (count > 3) { extra = (count - 3) * 1 } document.cookie = "extra=" + encodeURIComponent(extra); } </script> HTML: Code: <form name = "orderForm" onsubmit="validateOrder()"> <table width="600" border="0"> <tr> <th scope="col" width="400" align="left"><b>First Name</b><br /><input type="text" id="fname" name="fname" size=30> <br /> <br /> <b>Last Name</b><br /> <input type="text" id="lname" name="lname" size=30> <br /> <br /> <b>Street Address</b><br /> <input type="text" id="address" name="address" size=30> <br /> <br /> <input name="orderType" value="delivery" id="delivery" type="radio">Delivery</font> <input name="orderType" value="takeOut" id="takeout" type="radio">Take Out</font></th> <th scope="col" width="200" align="Left"> How Many Pizzas? <input type="text" id="quantity" name="quantity" size=5> <br /> <br /> <select name="crust" id="crust"> <option selected value="false">Select Crust Type</option> <option value="regular">Regular Crust</option> <option value="thin">Thin Crust</option> <option value="deep">Deep Dish</option> <option value="Parmesagn">Parmesagn Cheese</option> <option value="sourdough">Sourdough</option> </select> <br /> <br /> Select at Least One Topping: <br /> <br /> <input name = "toppings1" type = "checkbox" value = "extraCheese"> Extra Cheese<br> <input name = "toppings2" type = "checkbox" value = "sausage"> Sausage<br> <input name = "toppings3" type = "checkbox" value = "pepperoni"> Pepperoni<br> <input name = "toppings4" type = "checkbox" value = "bacon"> Bacon<br> <input name = "toppings5" type = "checkbox" value = "canadianBacon"> Canadian Bacon<br> <input name = "toppings6" type = "checkbox" value = "mushroom"> Mushroom<br> <input name = "toppings7" type = "checkbox" value = "pineapple"> Pineapple<br> <input name = "toppings8" type = "checkbox" value = "onion"> Onion<br> <input name = "toppings9" type = "checkbox" value = "olive"> Olive<br> <input name = "toppings10" type = "checkbox" value = "greenPepper"> Green Pepper<br></th> </tr> </table> <input name="submit" type="submit" value="submit" /><input name="" type="reset" /> </form> 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 guys, I am trying to re-work some pre-written Javascript code at which I am a novice at (I'm more CSS, HTML, PHP...). I am trying to validate a form field for a Purchaser's last name while accounting for an apostrophe if they have one in their last name. I bet it's something simple, but I still haven't been able to figure it out, or write it correctly: Code: function checkPurchaserName() { var err = false; var f = $(getApogeeElement('purchaser_name_first')); var l = $(getApogeeElement('purchaser_name_last')); if ( f && l && ( f.value.toLowerCase() != first.toLowerCase() || l.value.toLowerCase() != last.toLowerCase() ) ) { error_list[error_list.length] = 'The name of the purchaser must match the applicant.'; errorHighlight(f); err = true; } return err; } As an example. I started the purchasing process with the name "Patrick O'Malley". At the end page where this validation occurs, they have (2) text boxes, one for "first name" and one for "last name". They must type the same exact name for purchaser that they did for applicant, so "Patrick", then "O'Malley" Can someone please put me on the right track? Thanks. hiiii, im new to javascripts . Can anyone help me to know that a javascript which is validating a phone number accepts only digits but if the text field is left empty it should accept the entry as an empty entry.... plz share knowledge u will be more knowledgeable Hi folks. Looking to see if anyone could tell me where I'm going wrong with this script... I'm trying to have a field automatically filled with the day of the week ("Monday", "Tuesday", "Wednesday" and so on), upon the user selecting a date from the datepicker jQuery. If this isn't clear, I'll clarify further down the page. Here is the script: Code: <script type="text/javascript"> jQuery(document).ready(function($){ $('input[name="item_meta[428]"]').change(function(){ var d = $('input[name="item_meta[428]"]').val(); var n = new Date(d).getDay(); if(n == 0) val v = 'Sunday'; else if(n == 1) val v = 'Monday'; else if(n == 2) val v = 'Tuesday'; else if(n == 3) val v = 'Wednesday'; else if(n == 4) val v = 'Thursday'; else if(n == 5) val v = 'Friday'; else if(n == 6) val v = 'Saturday'; $('input[name="item_meta[429]"]').val(v).change(); }); }); </script> I'm basically trying to say, if the user selected today (15/05/2012) in the field 428 it would fill the field 429 with "Tuesday". Again, if the user selected 18/05/2012 in the field 428 then it would automatically fill field 429 with "Friday". It's being done to work in conjunction with a wordpress plugin called Formidable Pro hence the item_meta[428] etc. Any assistance would be greatly appreciated. Sam. I have a text field, call it income, that when the input is > 0 I need to dynamically show the next text box, and if it is blank hide the next text box. I would like to use onBlur but can't seem to get it to work. Can I do this? Help Hi Experts, I have designed an online registration system for a non profit in ASP/SQL. After the members register for classes they are automatically redirected to an invoice page with class fees. At the bottom of the page I have a Total Fees field of all the classes. The member is supposed to pay this amount to our organization. Question: We decided to do an online payment this year and would like to calculate a 2% additional amount on the Total Fees. This amount is paid to the Payment Merchant site. We cannot afford to lose the 2% since we are a non profit. Would really appreciate if someone can tell me how to 1) Add a new field under the Total field 2) And calculate the 2% additional fees and do a Grand Total. Thanks in advance. I have two drop down fields. When I select any value in the first drop down i want the second dropdown to automatically populate the value related to the first one. For e.g i have the first field as name and the second field as measured in. If I select 'Potato' in the first dropdown then the second drop down should populate 'kg'. Please help.
|