www.webdeveloper.com
Results 1 to 15 of 15

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

  1. #1
    Join Date
    Feb 2012
    Posts
    64

    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");
    }
    }

  2. #2
    Join Date
    Feb 2012
    Posts
    218
    Include this function
    Code:
      function is_int(input){
        return typeof(input)=='number' && parseInt(input)==input;
      }
    and use it like
    Code:
    else if (is_int(cardnum)==false)

  3. #3
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by hyperionXS View Post
    Include this function
    Code:
      function is_int(input){
        return typeof(input)=='number' && parseInt(input)==input;
      }
    and use it like
    Code:
    else if (is_int(cardnum)==false)
    Is there a way that I can modify it so that "-" is also allowed?

  4. #4
    Join Date
    Feb 2012
    Posts
    218
    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) )
    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

  5. #5
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by hyperionXS View Post
    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) )
    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?

  6. #6
    Join Date
    Feb 2012
    Posts
    218
    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>

  7. #7
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by hyperionXS View Post
    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>
    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?)
    Last edited by APD1993; 03-04-2012 at 08:13 AM.

  8. #8
    Join Date
    Feb 2012
    Posts
    218
    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})$/);
    }
    And in your code use it like this
    Code:
    if ( ! is_numeric(cardnum) )
    {
    	alert("You have not entered in digits into the Card Number field. Enter in a suitable value");
    }

  9. #9
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by hyperionXS View Post
    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})$/);
    }
    And in your code use it like this
    Code:
    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?

  10. #10
    Join Date
    Feb 2012
    Posts
    218
    Sure, you're welcome. Here is the code
    Code:
    function is_date(nr){
    	return !!nr.match(/^([0-9]{2})\/([0-9]{4})$/);
    }

  11. #11
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by hyperionXS View Post
    Sure, you're welcome. Here is the code
    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:

    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");
    }
    }
    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?

  12. #12
    Join Date
    Feb 2012
    Posts
    218
    This is because you put a space
    Code:
    function checksecnumber(input)
    {						
        return !!input.match(/^([0-9]HERE{3})$/);
    }
    Here is the working function
    Code:
    function checksecnumber(input)
    {						
        return !!input.match(/^([0-9]{3})$/);
    }

  13. #13
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by hyperionXS View Post
    This is because you put a space
    Code:
    function checksecnumber(input)
    {						
        return !!input.match(/^([0-9]HERE{3})$/);
    }
    Here is the working function
    Code:
    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?

  14. #14
    Join Date
    Feb 2012
    Posts
    218
    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;
    }
    Check my blog for more advanced tips and tricks. Alexandru Pandele

  15. #15
    Join Date
    Feb 2012
    Posts
    64
    Quote Originally Posted by hyperionXS View Post
    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;
    }
    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?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles