Date input field validation

Question

I'm building a site which requires the user to enter their date of birth as part of a form. Whem they click submit, the form is submit to a MySQL database.

One of the colums type (dob) is set as a date with PHPmyAdmin. I've got 3 fiels [DD] [MM] [YYY].

My issue is that if the user only enters 1 character in either the [DD] or [MM] field, this throws the date off completly in the database.

For example, if the user enters [01][02][2000] I recieve 2000-02-01 in my database. If the user enters [1][2][2000] I recieve 0000-20-12 in my database.

My question is, how can I check for this using some kind of validation to either prompt the user to add a 0 at the beginning - or - add the 0's on the backend if the form is not submit with them.

If someone supplies code, could they add comments explaining what each section does? Just trying to learn as I go.

Thanks a lot!

Jack

I'd recommend you read this summary, and then come back with any remaining questions: http://stackoverflow.com/a/3126175/683977 Validation/Sanitation of input values is one major key to a secure application, so keep learning. — pintxo, Jan 09 '17 at 19:06
@Santi, thank you for that. I'll certainly take a read through it, and continue to learn. — Jack Anyon, Jan 09 '17 at 19:42

zdrohn · Answer 1 · 2017-01-09T19:17:22.640

In PHP

if(strlen($DD) === 1) {
   $DD = '0' .$DD;
}

if(strlen($MM) === 1) {
   $MM = '0' .$MM;
}

This checks the length of the string that has been entered and if the length is 1, adds a 0 to the beginning of the string.

Or you could store the users date of birth as a single variable and format that using PHP's date function.

$input = '2/1/2000';
$birthday = date('Y-m-d', strtotime($input));

birthday outputs "2000/02/01"

score 0 · Answer 2 · answered Jan 09 '17 at 19:14

You need to apply this code.

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="utf-8">  
<title>JavaScript form validation - checking date</title>    
</head><br><body onload='document.form1.text1.focus()'>  
<div class="mail">  
<h2>Input a valid date [dd/mm/yyyy or dd-mm-yyyy format]</h2>  
<form name="form1" action="#">   
<ul>  
<li><input type='text' name='text1'/></li>  
<li>&nbsp;</li>  
<li class="submit"><input type="submit" name="submit" value="Submit" onclick="validatedate(document.form1.text1)"/></li>  
<li>&nbsp;</li>  
</ul>  
</form>  
</div> 
</body>  
</html>

JS

function validatedate(inputText)  
  {  
  var dateformat = /^(0?[1-9]|[12][0-9]|3[01])[\/\-](0?[1-9]|1[012])[\/\-]\d{4}$/;  
  // Match the date format through regular expression  
  if(inputText.value.match(dateformat))  
  {  
  document.form1.text1.focus();  
  //Test which seperator is used '/' or '-'  
  var opera1 = inputText.value.split('/');  
  var opera2 = inputText.value.split('-');  
  lopera1 = opera1.length;  
  lopera2 = opera2.length;  
  // Extract the string into month, date and year  
  if (lopera1>1)  
  {  
  var pdate = inputText.value.split('/');  
  }  
  else if (lopera2>1)  
  {  
  var pdate = inputText.value.split('-');  
  }  
  var dd = parseInt(pdate[0]);  
  var mm  = parseInt(pdate[1]);  
  var yy = parseInt(pdate[2]);  
  // Create list of days of a month [assume there is no leap year by default]  
  var ListofDays = [31,28,31,30,31,30,31,31,30,31,30,31];  
  if (mm==1 || mm>2)  
  {  
  if (dd>ListofDays[mm-1])  
  {  
  alert('Invalid date format!');  
  return false;  
  }  
  }  
  if (mm==2)  
  {  
  var lyear = false;  
  if ( (!(yy % 4) && yy % 100) || !(yy % 400))   
  {  
  lyear = true;  
  }  
  if ((lyear==false) && (dd>=29))  
  {  
  alert('Invalid date format!');  
  return false;  
  }  
  if ((lyear==true) && (dd>29))  
  {  
  alert('Invalid date format!');  
  return false;  
  }  
  }  
  }  
  else  
  {  
  alert("Invalid date format!");  
  document.form1.text1.focus();  
  return false;  
  }  
  }

CSS

li {list-style-type: none;  
font-size: 16pt;  
}  
.mail {  
margin: auto;  
padding-top: 10px;  
padding-bottom: 10px;  
width: 400px;  
background : #D8F1F8;  
border: 1px soild silver;  
}  
.mail h2 {  
margin-left: 38px;  
}  
input {  
font-size: 20pt;  
}  
input:focus, textarea:focus{  
background-color: lightyellow;  
}  
input submit {  
font-size: 12pt;  
}  
.rq {  
color: #FF0000;  
font-size: 10pt;  
}

score 0 · Accepted Answer · edited May 23 '17 at 12:07

Well I'd say you have a few options...

1. Avoid this issue altogether by properly using paramaterized queries and proper object types. The second you let text go from your inputs to your database unsanitized, you leave yourself wide open for injections and malicious attacks.

If the field is of type date, then you should be passing it as a date, so on and so forth. Pintxo provided a good link in the comments above that you should really familiarize yourself with: https://stackoverflow.com/a/3126175/683977

If you intend to stick with your current method (again, not recommended):

2. Make the boxes <select> lists instead of textboxes.

3. Merge the inputs and use HTML5's "Date" input: <input type="date" />

4. Using PHP, check the length of the Month and Day fields. Prepend a 0 if the length of the input is only one character.

5. Use some simple JavaScript to check the length of the fields, and if they're one character, notifiy the user that they must use the desired format.

If you're letting input data go directly into your database, you're essentially leaving an open MySQL panel up for any user that knows how to use it. If this is just a personal project that won't see the light of day, you can use one of these methods - however, the second it goes public, you'll have to rethink this.

Thanks for the recommendations, SQLinjection is something I'm looking to tackle, but I'd like the front end to work as it should before I move onto the next step. Just a personal project. Thank you for your input. — Jack Anyon, Jan 09 '17 at 19:40
I decided to use select boxes instead, listing the day the month and the year, and setting the value as 01, 02 etc etc — Jack Anyon, Jan 10 '17 at 08:35

Date input field validation

3 Answers3