Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,555
    Thanks
    75
    Thanked 105 Times in 104 Posts

    Require Birthday Field

    I am looking for a code that requires you to enter a birthday or else it turns red. It can either be a text box or a selection dropdown box.
    The ending format needs to be 0000-00-00 so I can use DATE in mysql.

    Any help is greatly appreciated.
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by myfayt View Post
    I am looking for a code that requires you to enter a birthday or else it turns red. It can either be a text box or a selection dropdown box.
    The ending format needs to be 0000-00-00 so I can use DATE in mysql.

    Any help is greatly appreciated.
    Not sure what you mean by field turns red if the birthday is not entered.
    You make that check when the form is submitted. If the field is blank use
    document.getElementById("dob").style.backgroundColor="#FF0000"

    Try this to check that the entered date is valid. It also calculates the user's age (as of today) which you may or may not require.


    Code:
    Enter Date Of Birth in YYYY-MM-DD format <input type = "text" name = "dob" id = "dob" size = "10" maxlength = "10" onblur = "checkAge()">
    
    <script type="text/javascript"> 
    
    function checkAge(){ 
    document.getElementById("dob").style.backgroundColor="#FFFFFF";  // reset the background to the field
    var today = new Date(); 
    var d = document.getElementById("dob").value;
    d = d .replace(/\//gi,"-");
    //add leading zeroes to month and day if required
    var dx = d.split("-");
    if (dx[1].length == 1) {dx[1]="0" + dx[1]}
    if (dx[2].length == 1) {dx[2]="0" + dx[2]}
    d = dx.join("-");
    document.getElementById("dob").value = d;
    
    if (!/\d{4}\-\d{2}\-\d{2}/.test(d)) {   // check valid format
    showMessage();
    return false;
    }
    
    d = d.split("-");
    var byr = parseInt(d[0]); 
    var nowyear = today.getFullYear();
    if (byr >= nowyear || byr < 1900) {  // check valid year
    showMessage();
    return false;
    }
    var bmth = parseInt(d[1],10)-1;   // radix 10!
    if (bmth <0 || bmth >11) {  // check valid month 0-11
    showMessage() 
    return false;
    }
    var bdy = parseInt(d[2],10);   // radix 10!
    var dim = daysInMonth(bmth+1,byr);
    if (bdy <1 || bdy > dim) {  // check valid date according to month
    showMessage();
    return false;
    }
    
    var age = nowyear - byr;
    var nowmonth = today.getMonth();
    var nowday = today.getDate();
    if (bmth > nowmonth) {age = age - 1}  // next birthday not yet reached
    else if (bmth == nowmonth && nowday < bdy) {age = age - 1}
    
    alert('You are ' + age + ' years old'); 
    if (age <= 15) {
    alert ("You are 15 years old or less!");  
    }
    }
    
    function showMessage() {
    if (document.getElementById("dob").value != "") {
    alert ("Invalid date format or impossible year/month/day of birth - please re-enter as YYYY-MM-DD");
    document.getElementById("dob").value = "";
    document.getElementById("dob").focus();
    }
    }
    
    function daysInMonth(month,year) {  // months are 1-12
    var dd = new Date(year, month, 0);
    return dd.getDate();
    } 
    
    </script>
    Quizmaster: How many days are there in Lent?
    Contestant: 31
    Last edited by Philip M; 04-05-2014 at 08:50 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Senior Coder
    Join Date
    Apr 2010
    Posts
    1,555
    Thanks
    75
    Thanked 105 Times in 104 Posts
    That part seems to work. Here is what I mean: Realm of Dragons - Register
    If you enter too much into the stats section, it turns red. So I am looking for something that if they leave blank or don't enter the correct format (YYYY-MM-DD) it turns red.

    Thanks
    Been a sign maker for 7 years. My business:
    American Made Signs

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,303
    Thanks
    203
    Thanked 2,562 Times in 2,540 Posts
    Quote Originally Posted by myfayt View Post
    That part seems to work. Here is what I mean: Realm of Dragons - Register
    If you enter too much into the stats section, it turns red. So I am looking for something that if they leave blank or don't enter the correct format (YYYY-MM-DD) it turns red.

    Thanks
    As I say, use

    document.getElementById("dob").style.backgroundColor="#FF0000";
    in the function showMessage()


    You can only detect that the field is blank when the form is submitted, unless you force focus on to that field.


    Modified with a few improvements:-

    Code:
    Enter Date Of Birth in YYYY-MM-DD format <input type = "text" name = "dob" id = "dob" size = "10" maxlength = "10" onblur = "checkAge()">
    
    <script type="text/javascript"> 
    
    function checkAge(){ 
    var today = new Date(); 
    document.getElementById("dob").style.backgroundColor="#FFFFFF";  // reset background
    var d = document.getElementById("dob").value;
    d = d .replace(/[a-z\/\s\:]/gi,"-");  // change invalid delimiters
    if (d.length < 6) {    // blank field or too short
    showMessage();
    return false;
    }
    
    //add leading zeroes to month and day if required
    var dx = d.split("-");
    if (dx[1].length == 1) {dx[1]="0" + dx[1]}
    if (dx[2].length == 1) {dx[2]="0" + dx[2]}
    d = dx.join("-");
    document.getElementById("dob").value = d;
    
    if (!/\d{4}\-\d{2}\-\d{2}/.test(d)) {   // check valid format
    showMessage();
    return false;
    }
    
    d = d.split("-");
    var byr = parseInt(d[0]); 
    var nowyear = today.getFullYear();
    if (byr >= nowyear || byr < 1900) {  // check valid year
    showMessage();
    return false;
    }
    var bmth = parseInt(d[1],10)-1;   // radix 10!
    if (bmth <0 || bmth >11) {  // check valid month 0-11
    showMessage() 
    return false;
    }
    var bdy = parseInt(d[2],10);   // radix 10!
    var dim = daysInMonth(bmth+1,byr);
    if (bdy <1 || bdy > dim) {  // check valid date according to month
    showMessage();
    return false;
    }
    
    var age = nowyear - byr;
    var nowmonth = today.getMonth();
    var nowday = today.getDate();
    if (bmth > nowmonth) {age = age - 1}  // next birthday not yet reached
    else if (bmth == nowmonth && nowday < bdy) {age = age - 1}
    
    alert('You are ' + age + ' years old'); 
    if (age <= 15) {
    alert ("You are 15 years old or less!");  
    }
    }
    
    function showMessage() {
    document.getElementById("dob").style.backgroundColor="#FF0000";
    alert ("Invalid date format or impossible year/month/day of birth - please re-enter as YYYY-MM-DD");
    document.getElementById("dob").value = "";
    document.getElementById("dob").focus();
    }
    
    function daysInMonth(month,year) {  // months are 1-12
    var dd = new Date(year, month, 0);
    return dd.getDate();
    } 
    
    </script>
    Last edited by Philip M; 04-07-2014 at 09:53 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Posting Permissions

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