SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
-
Feb 27, 2008, 10:39 #1
- Join Date
- Jul 2001
- Location
- So. Tenn.
- Posts
- 363
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Form/Age Verification problems in IE
I've been pulling my hair out on this one for almost two days now and have tried god knows how many variations from various websites. I'm really at the end of my rope, so I'm hoping someone can help.
Let me preface this by saying that I know this isn't the best method to do form validation (if I had my way, I would have done it with PHP and been done already), but it's my only option.
Here's the deal:
I'm attempting to validate age (to make sure the user is over 13 in this case) based on the values selected from day/month/year drop downs. This is in addition to some other basic required field validation. If the user is under 13, they should be redirected to another page instead of having the form submit.
My javascript current looks like this:
Code JavaScript:function checkInteger (theField, emptyOK) { if (checkInteger.arguments.length == 1) emptyOK = defaultEmptyOK; if ((emptyOK == true) && (isEmpty(theField.value))) return true; if (!isInteger(theField.value, false)) return false; else return true; } function validateThis() { lForm = document.forms.form1; if ((lForm.digit_code.value.length!=5) || (!checkInteger(lForm.digit_code,false))) { alert('5 Digit Code Required'); return false; } if (lForm.zip.value=="") { alert('Zip Code Required'); return false; } if (lForm.e_mail.value=="") { alert('Email Required'); return false; } if ((document.form1.day.selectedIndex == 0) || (document.form1.month.selectedIndex == 0) || (document.form1.year.selectedIndex == 0)) { alert("broken"); return false; } else { if (checkAge() == false) { document.location.href = 'down.html' return false; } else { alert("Success! The form would submit"); } } } function checkAge() { /* the minumum age you want to allow in */ var min_age = 13; /* change "age_form" to whatever your form has for a name="..." var year = parseInt(document.forms["form1"]["year"].value); var month = parseInt(document.forms["form1"]["month"].value) - 1; var day = parseInt(document.forms["form1"]["day"].value);*/ var year = parseInt(document.form1.year.selectedIndex); var month = parseInt(document.form1.month.selectedIndex) - 1; var day = parseInt(document.form1.day.selectedIndex); var theirDate = new Date((year + min_age), month, day); var today = new Date; if ( (today.getTime() - theirDate.getTime()) < 0) { return false; } else { return true; } }
Truncated to the important parts, my form looks something like this:
Code HTML4Strict:<form action="" method="post" name="form1"> <select name="month"> <option value="">Month</option> <option value="1">January</option> etc.... </select> <select name="day"> <option value="">Day</option> <option>1</option> etc... </select> <select name="year"> <option value="">Year</option> <option>2003</option> <option>2002</option> etc... </select> <input name="Submit" value="Finish" type="submit" onClick="return validateThis();"> </form>
My problem is that all of this works FINE in firefox. In IE 6 (which I'm testing with) not at all. I am having issues getting it to return TRUE when the birth date has been filled in (which the above code actually seems to resolve) and then correctly go to down.html when the age validation fails, or submit if it passes.
Any help would be greatly, muchly, desperately appreciated.
Thanks in advance.Mr Vector
High quality, royalty free, vector graphics
for t-shirt artists and graphic/web designers.
-
Feb 27, 2008, 11:43 #2
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ugh, dont set the validation onclick, set it onsubmit in the form element.
Code:<form onsubmit="return validateThis();">
-
Feb 27, 2008, 12:58 #3
- Join Date
- Jul 2001
- Location
- So. Tenn.
- Posts
- 363
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks for the suggestion. I updated that, but unfortunately it didn't seem to make any difference as far as how it works.
It seems as though I have gotten the missing field validation to work in both browsers, but the age check is not working in IE. It just submits the form anyway.
I wonder if I'm incorrectly specifying the field names in the agecheck function, though I've tried several different options with no success.
Any other thoughts?Mr Vector
High quality, royalty free, vector graphics
for t-shirt artists and graphic/web designers.
-
Feb 27, 2008, 14:38 #4
- Join Date
- Jan 2007
- Location
- Christchurch, New Zealand
- Posts
- 14,729
- Mentioned
- 104 Post(s)
- Tagged
- 4 Thread(s)
The isInteger function isn't a part of javascript. Do you have that function with your code?
Thanks for the code you provided. Can you please modify it so that it completely simulates the trouble you're experiencing. That is, correctly works in Firefox and not in IE.Programming Group Advisor
Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
Car is to Carpet as Java is to JavaScript
-
Feb 27, 2008, 16:38 #5
- Join Date
- Jul 2001
- Location
- So. Tenn.
- Posts
- 363
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yes, the isInteger is part of an external .js file. The only remaining issue seems to be that IE is not redirecting if checkAge fails. The Javascript could be stripped down to something like:
Code JavaScript:if (checkAge() == false) { document.location.href = 'down.html' return false; } else { alert("Success! The form would submit"); } function checkAge() { /* the minumum age you want to allow in */ var min_age = 13; /* change "age_form" to whatever your form has for a name="..." var year = parseInt(document.forms["form1"]["year"].value); var month = parseInt(document.forms["form1"]["month"].value) - 1; var day = parseInt(document.forms["form1"]["day"].value);*/ var year = parseInt(document.form1.year.options[document.form1.year.selectedIndex].value); var month = parseInt(document.form1.month.options[document.form1.month.selectedIndex].value) - 1; var day = parseInt(document.form1.day.options[document.form1.day.selectedIndex].value); var theirDate = new Date((year + min_age), month, day); var today = new Date; if ( (today.getTime() - theirDate.getTime()) < 0) { return false; } else { return true; } }
But I thought providing it in context would be helpful.Mr Vector
High quality, royalty free, vector graphics
for t-shirt artists and graphic/web designers.
Bookmarks