/    Sign up×
Community /Pin to ProfileBookmark

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

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?

[CODE]
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”);
}
}
[/CODE]

to post a comment
JavaScript

14 Comments(s)

Copy linkTweet thisAlerts:
@hyperionXSMar 04.2012 — Include this function
[CODE]
function is_int(input){
return typeof(input)=='number' && parseInt(input)==input;
}
[/CODE]

and use it like
[CODE]
else if (is_int(cardnum)==false)
[/CODE]
Copy linkTweet thisAlerts:
@APD1993authorMar 04.2012 — Include this function
[CODE]
function is_int(input){
return typeof(input)=='number' && parseInt(input)==input;
}
[/CODE]

and use it like
[CODE]
else if (is_int(cardnum)==false)
[/CODE]
[/QUOTE]


Is there a way that I can modify it so that "-" is also allowed? ?
Copy linkTweet thisAlerts:
@hyperionXSMar 04.2012 — Sure, use thisone instead
[CODE]
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) )
[/CODE]

If you want to add other characters, put them inside this [^0-9-], like

[^0-9-.] [COLOR="Red"].[/COLOR] to add a point

[^0-9-,] [COLOR="red"],[/COLOR] to add a comma
Copy linkTweet thisAlerts:
@APD1993authorMar 04.2012 — Sure, use thisone instead
[CODE]
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) )
[/CODE]

If you want to add other characters, put them inside this [^0-9-], like

[^0-9-.] [COLOR="Red"].[/COLOR] to add a point

[^0-9-,] [COLOR="red"],[/COLOR] to add a comma[/QUOTE]


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?
Copy linkTweet thisAlerts:
@hyperionXSMar 04.2012 — In this case use this function
[CODE]
<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>
[/CODE]
Copy linkTweet thisAlerts:
@APD1993authorMar 04.2012 — In this case use this function
[CODE]
<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>
[/CODE]
[/QUOTE]


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?)
Copy linkTweet thisAlerts:
@hyperionXSMar 04.2012 — Actually those were only to show you which format is valid. Use should use only this
[CODE]
function is_numeric(nr){
return !!nr.match(/^([0-9]{4})-([0-9]{4})-([0-9]{4})-([0-9]{4})$/);
}
[/CODE]

And in your code use it like this
[CODE]
if ( [COLOR="Red"]![/COLOR] is_numeric(cardnum) )
{
alert("You have not entered in digits into the Card Number field. Enter in a suitable value");
}
[/CODE]
Copy linkTweet thisAlerts:
@APD1993authorMar 04.2012 — Actually those were only to show you which format is valid. Use should use only this
[CODE]
function is_numeric(nr){
return !!nr.match(/^([0-9]{4})-([0-9]{4})-([0-9]{4})-([0-9]{4})$/);
}
[/CODE]

And in your code use it like this
[CODE]
if ( [COLOR="Red"]![/COLOR] is_numeric(cardnum) )
{
alert("You have not entered in digits into the Card Number field. Enter in a suitable value");
}
[/CODE]
[/QUOTE]


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? ?
Copy linkTweet thisAlerts:
@hyperionXSMar 04.2012 — Sure, you're welcome. Here is the code
[CODE]
function is_date(nr){
return !!nr.match(/^[COLOR="Red"]([0-9]{2})/([0-9]{4})[/COLOR]$/);
}
[/CODE]
Copy linkTweet thisAlerts:
@APD1993authorMar 04.2012 — Sure, you're welcome. Here is the code
[CODE]
function is_date(nr){
return !!nr.match(/^[COLOR="Red"]([0-9]{2})/([0-9]{4})[/COLOR]$/);
}
[/CODE]
[/QUOTE]


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

[CODE]
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");
}
}
[/CODE]


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? ?
Copy linkTweet thisAlerts:
@hyperionXSMar 04.2012 — This is because you put a space
[CODE]
function checksecnumber(input)
{
return !!input.match(/^([0-9][COLOR="Red"]HERE[/COLOR]{3})$/);
}
[/CODE]

Here is the working function
[CODE]
function checksecnumber(input)
{
return !!input.match(/^([0-9]{3})$/);
}
[/CODE]
Copy linkTweet thisAlerts:
@APD1993authorMar 04.2012 — This is because you put a space
[CODE]
function checksecnumber(input)
{
return !!input.match(/^([0-9][COLOR="Red"]HERE[/COLOR]{3})$/);
}
[/CODE]

Here is the working function
[CODE]
function checksecnumber(input)
{
return !!input.match(/^([0-9]{3})$/);
}
[/CODE]
[/QUOTE]


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? ?
Copy linkTweet thisAlerts:
@hyperionXSMar 04.2012 — Here
[CODE]
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;
}
[/CODE]

Check my blog for more advanced tips and tricks. Alexandru Pandele
Copy linkTweet thisAlerts:
@APD1993authorMar 04.2012 — Here
[CODE]
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;
}
[/CODE]

Check my blog for more advanced tips and tricks. Alexandru Pandele[/QUOTE]


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? ?
×

Success!

Help @APD1993 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...