How can I validate fields so that only numeric values can be entered into a field?

[APD1993]

I was wondering if there was a built in JavaScript function to check whether the value entered into a field is numeric or not. I have tried using the chkNumeric function, but it doesn't seem to work.

For instance, how would I implement it into coding such as this?

function ValidatePaymentDetails()
{
	var cardnum=document.forms["payment"]["cardnumber"].value;
	var cardexp=document.forms["payment"]["cardexpirydate"].value;
    var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
{
alert("You have not entered any values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
}
else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
{
	alert("You have not entered any values for the Card Number or the Card Expiry fields. Enter in suitable values.");
}
else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any values for the Card Number or the Card Security Number fields. Enter in suitable values.");
}					
else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
}

else if(cardnum==null|| cardnum=="")
{
		alert("You have not entered a value for the Card Number field. Enter in a suitable value.");
}
else if(cardexp==null|| cardexp=="")
{
	alert("You have not entered a value for the Card Expiry Date field. Enter in a suitable value.");
}
else if(cardsec==null|| cardsec=="")
{
	alert("You have not entered a Card Security Number field. Enter in a suitable value.");
}
else if (chkNumeric(cardnum)==false)
{
	alert("You have not entered in digits into the Card Number field. Enter in a suitable value");
}
}

[hyperionXS]

Include this function

  function is_int(input){
    return typeof(input)=='number' && parseInt(input)==input;
  }

and use it like

else if (is_int(cardnum)==false)

[APD1993]

Include this function

  function is_int(input){
    return typeof(input)=='number' && parseInt(input)==input;
  }

and use it like

else if (is_int(cardnum)==false)

Is there a way that I can modify it so that "-" is also allowed?

[hyperionXS]

Sure, use thisone instead

function is_numeric(nr){
	return (nr == nr.toString().replace(/([^0-9-]+)/g, ""));
}
alert( is_numeric('123456-987') )
alert( is_numeric('1234a56-987') )
alert( is_numeric(123456) )

If you want to add other characters, put them inside this [^0-9-], like
[^0-9-\.] \. to add a point
[^0-9-,] , to add a comma

[APD1993]

Sure, use thisone instead

function is_numeric(nr){
	return (nr == nr.toString().replace(/([^0-9-]+)/g, ""));
}
alert( is_numeric('123456-987') )
alert( is_numeric('1234a56-987') )
alert( is_numeric(123456) )

If you want to add other characters, put them inside this [^0-9-], like
[^0-9-\.] \. to add a point
[^0-9-,] , to add a comma

Let's say that I want the user to enter a card number in this format: 0000-0000-0000-000. Is there a way so that it can detect that exact setup, and if the setup entered is not correct, then an error message is displayed?

[hyperionXS]

In this case use this function

<script>
function is_numeric(nr){
	return !!nr.match(/^([0-9]{4})-([0-9]{4})-([0-9]{4})-([0-9]{4})$/);
}
alert( is_numeric('1234-1234-1234-1234') ) // true
alert( is_numeric('1234-1234-123a-1234') ) // all others are false
alert( is_numeric('1234-1234-1231-1234-') )
alert( is_numeric('1234-1234-1231-12341') )
alert( is_numeric('123456-987') )
alert( is_numeric('1234a56-987') )
alert( is_numeric(123456) )
</script>

[APD1993]

In this case use this function

<script>
function is_numeric(nr){
	return !!nr.match(/^([0-9]{4})-([0-9]{4})-([0-9]{4})-([0-9]{4})$/);
}
alert( is_numeric('1234-1234-1234-1234') ) // true
alert( is_numeric('1234-1234-123a-1234') ) // all others are false
alert( is_numeric('1234-1234-1231-1234-') )
alert( is_numeric('1234-1234-1231-12341') )
alert( is_numeric('123456-987') )
alert( is_numeric('1234a56-987') )
alert( is_numeric(123456) )
</script>

What is the exact use of the alert() boxes?

Would they be needed if I was to call this function in an else statement (part of the IF statement above, so that if there are no problems with fields being left out, then if the user does not enter in a valid card number, then an error message appears?)

[hyperionXS]

Actually those were only to show you which format is valid. Use should use only this

function is_numeric(nr){
	return !!nr.match(/^([0-9]{4})-([0-9]{4})-([0-9]{4})-([0-9]{4})$/);
}

And in your code use it like this

if ( ! is_numeric(cardnum) )
{
	alert("You have not entered in digits into the Card Number field. Enter in a suitable value");
}

[APD1993]

Actually those were only to show you which format is valid. Use should use only this

function is_numeric(nr){
	return !!nr.match(/^([0-9]{4})-([0-9]{4})-([0-9]{4})-([0-9]{4})$/);
}

And in your code use it like this

if ( ! is_numeric(cardnum) )
{
	alert("You have not entered in digits into the Card Number field. Enter in a suitable value");
}

Thank you so much for your help

Is there a similar way so that a date in the MM/YYYY format can only be entered and no other variations?

[hyperionXS]

Sure, you're welcome. Here is the code

function is_date(nr){
	return !!nr.match(/^([0-9]{2})\/([0-9]{4})$/);
}

[APD1993]

Sure, you're welcome. Here is the code

function is_date(nr){
	return !!nr.match(/^([0-9]{2})\/([0-9]{4})$/);
}

Hey, run into a slight problem. My code at the moment is as follows:

function help()
{
window.open("faqs.html", '_blank', 'status=0, toolbar=0, width=1000, height=1000')
return false;
}

function Navigate()
{
	var nav= confirm("Are you sure you want to navigate away from this page? There is a possibility that leaving this page with or without filling in all of the form details will cause for the current form details to be lost and require to be re-enetered. Click OK to navigate away from this page or click on Cancel to stay on this page");
	if (nav==true)
	{
		location.href="catalogue.html";
	}
	else 
	{
		location.href="#";
	}
}

function NavigateHome()
{
		var nav= confirm("Are you sure you want to navigate away from this page? There is a possibility that leaving this page with or without filling in all of the form details will cause for the current form details to be lost and require to be re-enetered. Click OK to navigate away from this page or click on Cancel to stay on this page");
	if (nav==true)
	{
		location.href="Test.html";
	}
	else 
	{
		location.href="#";
	}
	
}

function checknumber(input)
{
	return !!input.match(/^([0-9]{4})-([0-9]{4})-([0-9]{4})-([0-9]{4})$/);
}

function checksecnumber(input)
{						
    return !!input.match(/^([0-9] {3})$/);
}

function is_date(nr){
	return !!nr.match(/^([0-9]{2})\/([0-9]{4})$/);
}

function ValidatePaymentDetails()
{
	var cardnum=document.forms["payment"]["cardnumber"].value;
	var cardexp=document.forms["payment"]["cardexpirydate"].value;
    var cardsec=document.forms["payment"]["cardsecuritynumber"].value;
if (((cardnum==null||cardnum=="")&&(cardexp==null||cardexp=="") && (cardsec==null||cardsec=="")))
{
alert("You have not entered any values for the Card Number, Card Expiry Date or Card Security Number fields. Enter in suitable values.");
}
else if ((cardnum==null||cardnum=="")&&(cardexp==null||cardexp==""))
{
	alert("You have not entered any values for the Card Number or the Card Expiry fields. Enter in suitable values.");
}
else if((cardnum==null||cardnum=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any values for the Card Number or the Card Security Number fields. Enter in suitable values.");
}					
else if((cardexp==null||cardexp=="")&&(cardsec==null||cardsec==""))
	{
	alert("You have not entered any values for the Card Expiry Date or the Card Security Number fields. Enter in suitable values.");
}

else if(cardnum==null|| cardnum=="")
{
		alert("You have not entered a value for the Card Number field. Enter in a suitable value.");
}
else if(cardexp==null|| cardexp=="")
{
	alert("You have not entered a value for the Card Expiry Date field. Enter in a suitable value.");
}
else if(cardsec==null|| cardsec=="")
{
	alert("You have not entered a 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. 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 (is_date(cardexp)==false)
{
	alert("You have not entered in a valid Card Expiry Date in the Card Expiry Date field. Make sure it is in the MM/YYYY format. Enter in a suitable value");
}
}

The problem is that even if I enter in a valid security number such as 135, the alert message for the Card Security Number appears, even when I set the date validation check. Any idea where I've messed up?

[hyperionXS]

This is because you put a space

function checksecnumber(input)
{						
    return !!input.match(/^([0-9]HERE{3})$/);
}

Here is the working function

function checksecnumber(input)
{						
    return !!input.match(/^([0-9]{3})$/);
}

[APD1993]

This is because you put a space

function checksecnumber(input)
{						
    return !!input.match(/^([0-9]HERE{3})$/);
}

Here is the working function

function checksecnumber(input)
{						
    return !!input.match(/^([0-9]{3})$/);
}

Thanks

Is there a way so that if a user enters something such as below 1 or above 13 for the month number or a year number that is before 2012 that an error message will appear?

[hyperionXS]

Here

function is_date(nr){
	var match = nr.match(/^([0-9]{2})\/([0-9]{4})$/);
	if( !match ) return false;
	
	var month = parseInt(match[1]);
	if(month<1 || month>13) return false;
	
	var year = parseInt(match[2]);
	if(year<2012) return false;
	
	return true;
}

Check my blog for more advanced tips and tricks. Alexandru Pandele

[APD1993]

Here

function is_date(nr){
	var match = nr.match(/^([0-9]{2})\/([0-9]{4})$/);
	if( !match ) return false;
	
	var month = parseInt(match[1]);
	if(month<1 || month>13) return false;
	
	var year = parseInt(match[2]);
	if(year<2012) return false;
	
	return true;
}

Check my blog for more advanced tips and tricks. Alexandru Pandele

Do you possibly know of a way that can be used so that if the expiry date was before the next month, an error message will appear?