SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict rabbitdog's Avatar
    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.

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    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();">
    Well, this is bad practice as well but hopefully that's the solution.

  3. #3
    SitePoint Addict rabbitdog's Avatar
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    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

  5. #5
    SitePoint Addict rabbitdog's Avatar
    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •