Is there any way that JavaScript can be used so that only dates in the MM/YYYY format

This site is best viewed in a modern browser with JavaScript enabled.

Is there any way that JavaScript can be used so that only dates in the MM/YYYY format

APD1993

after the current month can be entered?

For instance, if the user types in something like 05/2013, then it is accepted but if they enter in something like 03/2012, then it it not accepted?

Any help is appreciated

proj

A simple solution would be to split the user input string into month and year and compare the two with the current date, like this:

function compareDate(userInput){
	var currentDate = new Date();
	var currentMonth = currentDate.getMonth() + 1;	// getMonth() returns the month as a number from 0 - 11, therefore add 1
	var currentYear = currentDate.getFullYear();	// 4-digit representation of the current year

var userDate = userInput.split("/");	// Split user input at "/"
var userMonth = userDate[0];
var userYear = userDate[1];
if (userYear < currentYear) return false;	// User input year < current year
if (userYear == currentYear && userMonth <= currentMonth) return false;	// User input year is current, but month is <= current month.

return true;	// User input date must be valid
}

compareDate("04/2012"); // Returns true
compareDate("02/2012"); // Returns false

But you might want to check that the user input is in a valid format (not "03-2012", "march 2012" etc.) before using a function like this.

APD1993

proj;1196891 wrote:
A simple solution would be to split the user input string into month and year and compare the two with the current date, like this:
function compareDate(userInput){
	var currentDate = new Date();
	var currentMonth = currentDate.getMonth() + 1;	// getMonth() returns the month as a number from 0 - 11, therefore add 1
	var currentYear = currentDate.getFullYear();	// 4-digit representation of the current year

var userDate = userInput.split("/");	// Split user input at "/"
var userMonth = userDate[0];
var userYear = userDate[1];
if (userYear < currentYear) return false;	// User input year < current year
if (userYear == currentYear && userMonth <= currentMonth) return false;	// User input year is current, but month is <= current month.

return true;	// User input date must be valid
}

compareDate("04/2012"); // Returns true
compareDate("02/2012"); // Returns false
But you might want to check that the user input is in a valid format (not "03-2012", "march 2012" etc.) before using a function like this.

Would this be applicable to a text box? For instance, my text box is called cardexp. Could I call the compareDate() function like this?

compareDate(cardexp).

I'm not sure if I have validation to check that the date is in an MM/YYYY format, but I would expect that it would require a regexp function?

steave1987

Thank you for this coding, I am searching for it.

proj

Would this be applicable to a text box? For instance, my text box is called cardexp. Could I call the compareDate() function like this?

compareDate(cardexp).

If "cardexp" is the id of the textbox you could do:

if (compareDate(document.getElementById('cardexp').value)){
	// compareDate returns true, do sum awsm stuffz
	alert("You entered a valid date.");
}else{
	// compareDate returned false
	alert("Date must be next month or later.");
}

Yes, the validation of the user input format can easily be done with regexp.

function valiDate(userInputDate){
	var dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;	// Create new RegExp
	if (userInputDate.match(dateFormat)) return true;	// User input is valid
	return false;	// Not valid
}

You then call valiDate from compareDate. Both functions put together:

function compareDate(userInput){

if (!valiDate(userInput)){	// If format is not MM/YYYY
	alert("Date format must be MM/YYYY.");
	return false;
}

var currentDate = new Date();
var currentMonth = currentDate.getMonth() + 1;	// getMonth() returns the month as a number from 0 - 11
var currentYear = currentDate.getFullYear();	// 4-digit representation of the current year

var userDate = userInput.split("/");	// Split user input at "/"
var userMonth = userDate[0];
var userYear = userDate[1];
if (userYear < currentYear) return false;	// User input year < current year
if (userYear == currentYear && userMonth <= currentMonth) return false;	// User input year is current, but month is <= current month.

return true;	// User input date must be valid
}

function valiDate(userInputDate){
	var dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;	// Create new RegExp
	if (userInputDate.match(dateFormat)) return true;	// User input is valid
	return false;	// Not valid
}

proj

Seems like the BB code removed the backspace in my regular expression. The validate function should look like this:

function valiDate(userInputDate){
    var dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;    // Create new RegExp. Notice the backspace!
    if (userInputDate.match(dateFormat)) return true;    // User input is valid
    return false;    // Not valid
}

007Julien

It would be perhaps preferable to take advantage of the power of the regular expressions to simplify the user entries...

// With one or two digit for the month (by disregarding the other characters  - spaces, tabs or carriage returns at the beginning or at the end)
var dateFormat=/\d?\d\/\d\d\d\d/g;

// With a separator chosen by the user
var dateFormat=/\d?\d\.\d\d\d\d/g;

// Then your function would be
function validDate(userInputDate){
   var userMonth=userYear=null;
   var dateFormat=/(\d?\d\).(\d\d\d\d)/g; // With two sub-patterns 
   userInput.replace(dateFormat,function(a,b,c){userMonth=b;userYear=c;});
   if (!userMonth || !userYear)  // the format is not valid 
      {alert("Not a valid format !" );return;} 
   // the format is valid test with userMonth-1 and userYear
   //...
}

It would be too possible to accept two or for digits for the year...

APD1993

proj;1196905 wrote:
Seems like the BB code removed the backspace in my regular expression. The validate function should look like this:
function valiDate(userInputDate){
    var dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;    // Create new RegExp. Notice the backspace!
    if (userInputDate.match(dateFormat)) return true;    // User input is valid
    return false;    // Not valid
} 

How would I call this function in this code then?

function ValidatePaymentDetails()
{
	var cardnum=document.forms["payment"]["cardnumber"].value;
	var cardexp=document.forms["payment"]["cardexpirydate"].value;
    var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
if (((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec))))
{
	alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
{
alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp)))
{
	alert("You have not entered any suitable values for the Card Number or Card Expiry Date fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
{
	alert("You have not entered any suitable values for the Card Number or the Card Expiry fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Number or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Number or the Card Security Number fields. Enter in suitable values.");
}	
else if ((hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}				
else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
}
else if (hasWhiteSpace2(cardnum))
{
	alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardnum==null|| cardnum=="")
{
		alert("You have not entered a suitable value for the Card Number field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardexp))
{
	alert("You have not entered in a suitable value for the Card Expiry Date field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardexp==null|| cardexp=="")
{
	alert("You have not entered a suitable value for the Card Expiry Date field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardsec))
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardsec==null|| cardsec=="")
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value.");
}
else if (checknumber(cardnum)==false)
{
	alert("You have not entered in a valid Card Number in the Card Number field. Make sure that it is in the 0000-0000-0000-0000 format and remove any leading or trailing spaces. Enter in a suitable value.");
}
else if (checksecnumber(cardsec)==false)
{
	alert("You have not entered in a valid Card Security Number in the Card Security Number field. Make sure it is in the 000 format. Enter in a suitable value.");
}
//CODE GOES HERE
else if (validDate(cardexp) == true)
{
return validDate(cardexp);
return false;
}
else if (compareDate(cardexp)==true)
{
	return compareDate(cardexp);
}

But that doesn't seem to work :/

Also, with the validDate function, is it set up so that only dates in the MM/YYYY format can be entered and not in a format such as MM-YYYY?

proj

Wow, that is a lot of else if's... First of all, it is almost always better to compare the user input with what you want it to look like, not with what you don't want it to look like. Take this pseudo code for example:

if format is MM-YY
alert "invalid format"

if format is DD-MM-YY
alert "wrong format"

if format is YYYY/MM/DD
alert "completely wrong format"

If you go through all the invalid inputs you will be stuck in front of the computer forever.. Instead compare the input with what you want it to look like.

if format is not MM/YYYY
alert "wrong format"

Then you only need to validate it once. Of course, this does not work if you want a custom error message for every false user input, but you don't want that.

//CODE GOES HERE
else if (validDate(cardexp) == true)
{
return validDate(cardexp);
return false;
}
else if (compareDate(cardexp)==true)
{
	return compareDate(cardexp);
}

What are you trying to accomplish here? All you need to do to validate the format and make sure the given date is next month or later is:

if (compareDate(cardexp) == true){
    // All the code you want to run if user input is valid goes here.
}else{
    // Code within these brackets will be run if user input is invalid.
}

The code I posted will only work with the MM/YYYY format. 007Juliens code is a little harder to understand but works for all kinds of similar formats like MM:YYYY, MM-YYYY, MM/YYYY. Use his code instead if you know how to work with it.

APD1993

proj;1196916 wrote:
Wow, that is a lot of else if's... First of all, it is almost always better to compare the user input with what you want it to look like, not with what you don't want it to look like. Take this pseudo code for example:

if format is MM-YY
alert "invalid format"

if format is DD-MM-YY
alert "wrong format"

if format is YYYY/MM/DD
alert "completely wrong format"

If you go through all the invalid inputs you will be stuck in front of the computer forever.. Instead compare the input with what you want it to look like.

if format is not MM/YYYY
alert "wrong format"

Then you only need to validate it once. Of course, this does not work if you want a custom error message for every false user input, but you don't want that.
//CODE GOES HERE
else if (validDate(cardexp) == true)
{
return validDate(cardexp);
return false;
}
else if (compareDate(cardexp)==true)
{
	return compareDate(cardexp);
}
What are you trying to accomplish here? All you need to do to validate the format and make sure the given date is next month or later is:
if (compareDate(cardexp) == true){
    // All the code you want to run if user input is valid goes here.
}else{
    // Code within these brackets will be run if user input is invalid.
}
The code I posted will only work with the MM/YYYY format. 007Juliens code is a little harder to understand but works for all kinds of similar formats like MM:YYYY, MM-YYYY, MM/YYYY. Use his code instead if you know how to work with it.

What I am trying to accomplish is that if they enter in a date such as 02/2012 (anything less than a month ahead of now) that an error message appears. However, I also want an error message so that if they enter the date in a form that is not MM/YYYY, then another error message appears

I was wondering how I can implement the validDate function into my list of else ifs as well as my compareDate function . However, with the coding I gave above, if I enter in something such as 02-200003, then no error message appears and I was wondering whether I went wrong with my trues and falses in the calling of my validDate function

proj

Since valiDate is called from within compareDate you don't need to call valiDate at all. Just send the user input to compareDate as I did above and it will work.

Change your code like this and your ValidatePaymentDetails function will return true if compareDate (and valiDate) is true, and return false if compareDate (or valiDate) is false.

//CODE GOES HERE
else if (compareDate(cardexp) == true)
{
return true;
}
else if (compareDate(cardexp)== false)
{
	return false;
}

Or, simply..

return compareDate(cardexp);

APD1993

proj;1196933 wrote:
Since valiDate is called from within compareDate you don't need to call valiDate at all. Just send the user input to compareDate as I did above and it will work.

Change your code like this and your ValidatePaymentDetails function will return true if compareDate (and valiDate) is true, and return false if compareDate (or valiDate) is false.
//CODE GOES HERE
else if (compareDate(cardexp) == true)
{
return true;
}
else if (compareDate(cardexp)== false)
{
	return false;
}
Or, simply..
return compareDate(cardexp);

Still having an issue with the date :/

As of now, my coding is as follows:

ValidatePaymentDetails()

function ValidatePaymentDetails()
{
	var cardnum=document.forms["payment"]["cardnumber"].value;
	var cardexp=document.forms["payment"]["cardexpirydate"].value;
    var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
if (((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec))))
{
	alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
{
alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp)))
{
	alert("You have not entered any suitable values for the Card Number or Card Expiry Date fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
{
	alert("You have not entered any suitable values for the Card Number or the Card Expiry fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Number or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Number or the Card Security Number fields. Enter in suitable values.");
}	
else if ((hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}				
else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
}
else if (hasWhiteSpace2(cardnum))
{
	alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardnum==null|| cardnum=="")
{
		alert("You have not entered a suitable value for the Card Number field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardexp))
{
	alert("You have not entered in a suitable value for the Card Expiry Date field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardexp==null|| cardexp=="")
{
	alert("You have not entered a suitable value for the Card Expiry Date field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardsec))
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardsec==null|| cardsec=="")
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value.");
}
else if (checknumber(cardnum)==false)
{
	alert("You have not entered in a valid Card Number in the Card Number field. Make sure that it is in the 0000-0000-0000-0000 format and remove any leading or trailing spaces. Enter in a suitable value.");
}
else if (checksecnumber(cardsec)==false)
{
	alert("You have not entered in a valid Card Security Number in the Card Security Number field. Make sure it is in the 000 format. Enter in a suitable value.");
}
else if (compareDate(cardexp)==true)
{
	return true;
}
else if (compareDate(cardexp)==false)
{
	return false;
}
}

validDate

function validDate(userInput)
{
	var dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;
	if (userInputDate.match(dateFormat)) return true;
	else
	{
		alert("You have not entered in a valid card expiry date in the Card Expiry Date field. Make sure that any dates entered are in the MM/YYYY format. Enter in a suitable value");
		return false;
	}
}

compareDate

function compareDate(userInput){
var currentDate = new Date();
var currentMonth = currentDate.getMonth()+1;
var currentYear = currentDate.getFullYear();
var userDate = userInput.split("/");
var userMonth = userDate[0];
var userYear = userDate[1];
if (userYear< currentYear || userYear==currentYear && userMonth<=currentMonth)
{
	alert ("You cannot enter in a date that is before the next month");
	 return false
}
else if(!validDate(userInput))
{
	alert("You have not entered in a valid card expiry date in the Card Expiry Date field. Make sure that any dates entered are in the MM/YYYY format. Enter in a suitable value");
	return false;
}
}

It seems that it can detect when a month that is not at least one month ahead from now, but it can't detect if I enter something such as 023/2012 :/

I appreciate the help you're giving me

proj

Just use the functions I gave you and it will work fine. You should also get som kind of javascript debugger that points out errors in your code. Modified below to give an alert on dates before next month.

function compareDate(userInput){

if (!valiDate(userInput)){    // If format is not MM/YYYY
    alert("Date format must be MM/YYYY.");
    return false;
}

var currentDate = new Date();
var currentMonth = currentDate.getMonth() + 1;    // getMonth() returns the month as a number from 0 - 11
var currentYear = currentDate.getFullYear();    // 4-digit representation of the current year

var userDate = userInput.split("/");    // Split user input at "/"
var userMonth = userDate[0];
var userYear = userDate[1];
if (userYear < currentYear || (userYear == currentYear && userMonth <= currentMonth)){
    alert("Date must be next month or later.");
    return false;
}    
return true;    // User input date must be valid
}

function valiDate(userInputDate){
    var dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;    // Create new RegExp
    if (userInputDate.match(dateFormat)) return true;    // User input is valid
    return false;    // Not valid
}

APD1993

proj;1196938 wrote:
Just use the functions I gave you and it will work fine. You should also get som kind of javascript debugger that points out errors in your code. Modified below to give an alert on dates before next month.
function compareDate(userInput){

if (!valiDate(userInput)){    // If format is not MM/YYYY
    alert("Date format must be MM/YYYY.");
    return false;
}

var currentDate = new Date();
var currentMonth = currentDate.getMonth() + 1;    // getMonth() returns the month as a number from 0 - 11
var currentYear = currentDate.getFullYear();    // 4-digit representation of the current year

var userDate = userInput.split("/");    // Split user input at "/"
var userMonth = userDate[0];
var userYear = userDate[1];
if (userYear < currentYear || (userYear == currentYear && userMonth <= currentMonth)){
    alert("Date must be next month or later.");
    return false;
}    
return true;    // User input date must be valid
}

function valiDate(userInputDate){
    var dateFormat=/^[0-9]{2}\/{1}[0-9]{4}$/g;    // Create new RegExp
    if (userInputDate.match(dateFormat)) return true;    // User input is valid
    return false;    // Not valid
} 

Oh wow, you are such a lifesaver

One last parting question, when the error messages appear, they seem to appear twice (i.e. when I click on OK, it pops up again). Is there any fix for that?

APD1993

EDIT: I also want it so that if everything is entered correctly, then the user is taken to the checkout.html page, but it does not seem to work. Here is my updated coding:

function ValidatePaymentDetails()
{
	var cardnum=document.forms["payment"]["cardnumber"].value;
	var cardexp=document.forms["payment"]["cardexpirydate"].value;
    var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
if (((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec))))
{
	alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
{
alert("You have not entered any suitable values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardexp)))
{
	alert("You have not entered any suitable values for the Card Number or Card Expiry Date fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
{
	alert("You have not entered any suitable values for the Card Number or the Card Expiry fields. Enter in suitable values.");
}
else if ((hasWhiteSpace2(cardnum))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Number or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}
else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Number or the Card Security Number fields. Enter in suitable values.");
}	
else if ((hasWhiteSpace2(cardexp))&&(hasWhiteSpace2(cardsec)))
{
	alert("You have not entered any suitable values for the Card Expiry Date or Card Security Number fields. Enter in suitable values, possibly by removing any leading or trailing spaces");
}				
else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any suitable values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
}
else if (hasWhiteSpace2(cardnum))
{
	alert("You have not entered in a suitable value for the Card Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardnum==null|| cardnum=="")
{
		alert("You have not entered a suitable value for the Card Number field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardexp))
{
	alert("You have not entered in a suitable value for the Card Expiry Date field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardexp==null|| cardexp=="")
{
	alert("You have not entered a suitable value for the Card Expiry Date field. Enter in a suitable value.");
}
else if (hasWhiteSpace2(cardsec))
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value, possibly by removing any leading or trailing spaces");
}
else if(cardsec==null|| cardsec=="")
{
	alert("You have not entered a suitable value for the Card Security Number field. Enter in a suitable value.");
}
else if (checknumber(cardnum)==false)
{
	alert("You have not entered in a valid Card Number in the Card Number field. Make sure that it is in the 0000-0000-0000-0000 format and remove any leading or trailing spaces. Enter in a suitable value.");
}
else if (checksecnumber(cardsec)==false)
{
	alert("You have not entered in a valid Card Security Number in the Card Security Number field. Make sure it is in the 000 format. Enter in a suitable value.");
}
else if (compareDate(cardexp)==true)
{
	return true;
}

else
{
	location.href="checkout.html";
}
}

Thanks again for any help