www.webdeveloper.com
Results 1 to 5 of 5

Thread: Birthday Validation mm/dd/yyyy

  1. #1
    Join Date
    Oct 2010
    Posts
    11

    Birthday Validation mm/dd/yyyy

    Hello all,

    I am having difficulty with my javascript data validation for a birthday field. The error is coming up correctly, but the result is never returned as true. Even if I enter the date correctly, the error "Invalid date! The correct date format is like '01/01/2004'. Please try again." comes up. This data validation is for a contact form that i've developed for a personal site. Can someone please stear me in the right direction? I feel as if this is a simple syntax error, but I have looked at it for hours and cannot seem to find any error in script or the functions.

    Here is the code:

    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>Add Contact</title>
    
    <script  type="text/javascript">
    function Validateform(){
        var email=document.form1.email;
        var firstname=document.form1.firstname;
        var lastname=document.form1.lastname;
        var state=document.form1.state;
        var reEmail = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;    
        var valid = "0123456789/";
        var slashcount = 0;
        
        
        if ((email.value==null)||(email.value=="")){
            alert("Please enter an email address");
            email.focus();
            return false;
        }
        if (reEmail.test(email.value)==false){
              alert ("Please enter a valid email address");
               email.focus();
               return false;
           }
            if ((firstname.value=="")||(firstname.value==null)) {
            alert("Please enter a first name");
            firstname.focus();
            return false;
        }
        
        if ((lastname.value=="")||(lastname.value==null)) {
            alert("Please enter a last name");
            lastname.focus();
            return false;
        }    
        if (state.selectedIndex==0 ) {
            alert("Select state");
            state.focus();
            return false;
        }
        if ((birthday.value=="")||(birthday.value==null)) {
            alert("This field is required. Please enter date mm/dd/yyyy!")
            birthday.focus();
            return false;
         }
             
         if (birthday.length!=10) {
            alert("Invalid date! The correct date format is like '01/01/2004'. Please try again.")
             return false;
         }
    
             for (var i=0; i < birthday.length; i++)
             {
             temp = "" + birthday.substring(i, i+1);
             if (temp == "/") 
             slashcount++;
             if (valid.indexOf(temp) == "-1") {
             alert("Invalid characters in your date. Please try again.")
             return false;
         }
             if (slashcount != 2) {
           alert("Invalid Date! The correct date format is like '01/01/2004'. Please try again.")
             return false;
         }
             if((birthday.charAt(2)!= '/')||( birthday.charAt(5) != '/')) {
             alert("Invalid date! The correct date format is like '01/01/2004'. Please try again.")
             return false
        }
    }
        return true
        }
    
    
    </script>
    
    
    <style type="text/css">
    .style1 {
        text-align: center;
        font-size: x-large;
    }
    .style2 {
        text-align: center;
    }
    .style3 {
        text-align: left;
    }
    .style4 {
        text-align: right;
    }
    .style5 {
        text-align: left;
        margin-left: 160px;
    }
    </style>
    
    </head>
    
    <body style="color: #FFFFFF; background-color: #000000">
    
    <div class="style2">
    
    <p class="style1"><strong>Add Contact</strong></p>
    
    <?php
    // Show the form
    if(!$_POST['Submit'])
    {
    
    ?>
    
    <form action="<?=$_SERVER['PHP_SELF']?>" method="post" id="form1" name="form1" onsubmit="return Validateform();">
        <div class="style3">
        <br />
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; * Required Field</div>
                <table style="width: 100%">
        <tr>
            <td style="width: 219px; height: 23px" valign="top" class="style4">*E-mail Address:</td>
          <td style="height: 23px" class="style3">
            <input name="email" id="email" type="text"   width="250px" size="50" />
            </td>
        </tr>
        <tr><td class="style4">*First Name:</td><td class="style3"><input type="text" name="firstname" id="firstname" size="30" width="250px"/></td></tr>
        <tr>
            <td class="style4" >*Last Name:</td><td class="style3" ><input name="lastname" id="lastname" type="text"  size="30" width="250px"/></td>
        </tr>
        <tr><td class="style4">Phone:</td><td class="style3"><input type="text" name="phone" id="phone" size="15" width="250px" /></td></tr>
        <tr>
          <td class="style4">Birthday:</td><td class="style3">
            <input type="text" name="birthday" id="birthday" size="50" style="width: 188px" /></td></tr>
        <tr>
          <td class="style4">Address Line 1:</td><td class="style3"><input type="text" name="address1" id="address1" size="50" width="250px" /></td></tr>
        <tr>
          <td class="style4">Address Line 2:</td><td class="style3"><input type="text" name="address2" id="address2" size="50" width="250px" /></td></tr>
        <tr><td class="style4">City:</td><td class="style3"><input type="text" name="city" id="city" size="50"  width="250px"/></td></tr>
        <tr><td class="style4">*State:</td><td class="style3"><select name="state" id="state">
                        <option></option>
                        <option>NJ</option>
                        <option>NY</option>
                        
                    </select></td></tr>
        <tr><td class="style4">Zip:</td><td class="style3"><input type="text" name="zip" id="zip" size="5" /></td></tr>
    </table>
                            
    <p class="style3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <input name="Submit" type="submit" value="Submit" />&nbsp;</p>
        <p class="style5"><a href="show_contacts.php">Administrative Area</a><br />
    </p>
    </form>
    
    <?php
    
    }
    else
    {
    // The form has been submitted; process form
    
    include("dl.php");
    
    $email=$_POST['email'];
    $lastname=$_POST['lastname'];
    $firstname=$_POST['firstname'];
    $phone=$_POST['phone'];
    $address1=$_POST['address1'];
    $address2=$_POST['address2'];
    $birthday=$_POST['birthday'];
    $city=$_POST['city'];
    $state=$_POST['state'];
    $zip=$_POST['zip'];
    $query = "INSERT INTO person (Email, Last_Name,First_Name,phone,address1,address2,birthday,city,state,zip) VALUES ('$email','$lastname','$firstname','$phone','$address1','$address2','$birthday','$city','$state','$zip')";
    
    if (!mysql_query($query,$con))
      { 
          die('Error: ' . mysql_error());
      }
    else {
        echo "<center><b> Contact info for $firstname $lastname has been successfully added; If you are 30-60 years old you will receive a middle age discount.  If you are 60 or older you will receive a senior citizen discount. </b><a href='show_contacts.php'>Administrative Area</a></center>";
    }
    
    mysql_close();
    
    }
    ?>
    </div>
    </body>
    
    </html>

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    First at all: you will never be able to find out whether the user will enter the date as mm/dd/yyyy or (European style) as dd/mm/yyyy. For instance 03/04/2011 could be March the 4th in USA but April the 3rd in Europe. This is the reason for you should use separate fields (or even better separate list boxes) for day, month and year.

    If you use list boxes (dynamically created starting from year, and subsequently from the month) you don't even need a validation. Or you may use one of the many ready-made JavaScript calendars - just Google for.

  3. #3
    Join Date
    Oct 2010
    Posts
    11
    I have looked into this, but unfortunately I am required by my advisor in the course I am taking to use Javascript validation for this field. Does anything stand out as being a reason for never resulting true?

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    ok

    Your code:
    1. You have not defined the variable birthday
    2. You try to compare the length of an element, instead of comparing the length of the value of that element

    Try this:
    Code:
    //...
    var email=document.form1.email;
    var firstname=document.form1.firstname;
    var lastname=document.form1.lastname;
    var state=document.form1.state;
    var birthday=document.form1.birthday;
    //...
    if (birthday.value.length!=10) {
    //...

  5. #5
    Join Date
    Oct 2010
    Posts
    11
    Kor!! Thanks a bunch buddy, it worked.

    I had limited it down to an error in the length by changing each error message so I could pinpoint the problem. I completely understand the error now thanks to you. My javascript skills have improved! Thanks bud!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles