www.webdeveloper.com
Results 1 to 5 of 5

Thread: Checking for Letters

Hybrid View

  1. #1
    Join Date
    Oct 2013
    Posts
    2

    Checking for Letters

    Hi everyone. This is my first time posting for help, so I'm sorry if I have not included enough information.

    I'm having some trouble with a form I am working on.

    The form is simple, it just has some text boxes and selection menus asking for information like name and phone number. There are two buttons. One displays the entered information at the bottom of the screen, and the other checks to see if the phone number is 10 digits long, and does not include any non-numeric characters. This is the button I'm having an issue with.

    Code:
    function checkNumber()
    {
    //Initialize variables
    var userPhone = "";
    var msg = "";
    var numberLength = 0;
    var checkDigits = false;
    var checkLength = false;
    
    userPhone = document.getElementById('phoneNumber').value; //Get contents of input typed into phone number box
    
    	//Check to ensure length is exactly 10 characters
    	if (userPhone.length < 10 || userPhone.length > 10) 
    	{
    		msg = "Sorry, ten digits were not entered. Try again.";
    		document.getElementById('phoneDisplay').innerHTML = msg;
    	}
    	else {
    		checkLength = true;
    	}
    
    	//Check for non-numeric characters
    	numberLength = userPhone.length;
    	for (i = 0; i < numberLength; i++) 
    		{
    			if ((userPhone.charCodeAt(i) < 48) || (userPhone.charCodeAt(i) > 57)) //Unicode for 0-9 is decimal 48-57
    			{
    				msg = "Sorry, one or more characters entered was not a number.";
    				document.getElementById('phoneDisplay').innerHTML = msg;
    			}
    		else 
    			{
    				checkDigits = true;
    			}
    		}
    		
    	if ((checkLength === true) && (checkDigits === true)) 
    		{ 
    			msg = document.getElementById('phoneNumber').value;
    			document.getElementById('phoneDisplay').innerHTML = msg; //If both checks are met, the number is displayed
    		}
    
    }
    How it should work
    If the number is not 10 digits long, or includes non-numeric values, an error message is displayed in <span id=phoneDisplay</span>. If it is entered correctly, the 10 digit phone number will display here. I am using the ASCII code equivalents of 0-9 to specify whether or not a character is a number or not.

    How it is actually working
    Length seems OK. If it's not 10 digits, no matter if its letters or numbers entered, it does not work. However, there are problems with the number check. If I enter all letters or letters at the beginning, the error is displayed. If I enter letters in the middle of the string, there is no error and the number (like 610ABC7891) is displayed. This shouldn't be happening.

    Is anyone able to point me in the right direction? I've been at this for a few hours, and have not been able to make it 100% functional.

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    2,036
    Why not have a form field of maximum 16 characters when the focus is removed from the foeld, you then check the contents.

    What you should be doing in reality is allowing people to enter data as they are comfortable, eg, 0752 912 3456 or +44752 912 3456 and you evaluate if the number is valid based on the length and if anything containing a + after it is numeric and you can remove the white space fro validation purposes.

    What I suggest is you ask one of the Regular Expression guys to help you with this.
    Yes, I know I'm about as subtle as being hit by a bus..(\\.\ Aug08)
    Yep... I say it like I see it, even if it is like a baseball bat in the nutz... (\\.\ Aug08)
    I want to leave this world the same way I came into it, Screaming, Incontinent & No memory!
    I laughed that hard I burst my colostomy bag... (\\.\ May03)
    Life for some is like a car accident... Mine is like a motorway pile up...

    Problems with Vista? :: Getting Cryptic wid it. :: The 'C' word! :: Whois?

  3. #3
    Join Date
    Mar 2009
    Posts
    431
    You can try this if you want to. As written you send the content down as the argument and it returns true or false if the arg has ten numerical characters in it. Any spaces, periods, or dashes will be permitted as separators but no other characters are allowed.

    Code:
    function phoneNum(str){
        var i, len, num, perm, total;
        perm =' .-'; //acceptable separators-add more if you want to
        perm = perm.split("");
    
        num = '0123456789';
        num = num.split("");
    
        str = str.split("");
        len = str.length;
        total = 0;
        for(i =0; i < len; i++){  //if a numeral, increment total
    	if(num.indexOf(str[i]) != -1){
    	    total++;
    	}
    	else if(perm.indexOf(str[i]) == -1){ //if not a numeral, is it allowed?
    	    return false;
    	}
        }
        if(total == 10){
    	return true;
        }
        return false;
    }

  4. #4
    Join Date
    Oct 2013
    Posts
    2
    Thanks for the replies. I'm sure they work but I'm pretty new to this, and am not too familiar with some of the stuff in that last post.

    I did get mine to work, I'm just not sure why it works.

    I added 'return;'

    Code:
    if ((userPhone.charCodeAt(i) < 48) || (userPhone.charCodeAt(i) > 57)) //Unicode for 0-9 is decimal 48-57
    			{
    				msg = "Sorry, one or more characters entered was not a number.";
    				document.getElementById('phoneDisplay').innerHTML = msg;
                                    return; //THIS IS NEW
    			}
    I'm struggling to understand why this fixed it and how it differs from break;

  5. #5
    Join Date
    Oct 2012
    Location
    Croatia
    Posts
    225
    Quote Originally Posted by adam220891 View Post
    Thanks for the replies. I'm sure they work but I'm pretty new to this, and am not too familiar with some of the stuff in that last post.

    I did get mine to work, I'm just not sure why it works.

    I added 'return;'

    Code:
    if ((userPhone.charCodeAt(i) < 48) || (userPhone.charCodeAt(i) > 57)) //Unicode for 0-9 is decimal 48-57
    			{
    				msg = "Sorry, one or more characters entered was not a number.";
    				document.getElementById('phoneDisplay').innerHTML = msg;
                                    return; //THIS IS NEW
    			}
    I'm struggling to understand why this fixed it and how it differs from break;
    RETURN statement is illegal if used outside of a function. You should get an error.

    For this kind of validation you should really rely on using the Regural Expression. If you're not familiar with it I suggest you to start learning it.

    Since I don't know where are you coming from as an example I'll use some of the most common telephone number formats in my country.

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
    	<title> Untitled </title>
    	<meta charset="utf-8">
    	<script>
    	function checkNumber()
    		{
    			var regExp = /^(\+{1}|0{2})385\d{7,8}$/g;
    			var res = document.getElementById('result');
    			var elem = document.getElementById('telNumber');
    			var telNumber = elem.value;
    			
    			if (!(regExp.test(elem.value)))
    			{
    				alert("Please enter a valid telephone number in one of the specified formats!!");
    				elem.focus();
    				elem.value = "";
    			}
    			else
    				res.innerHTML = "Your telephone number is: " + elem.value;
    			return;
    		}
    	</script>
    </head>
    <body>
    	<h4>Valid telephone number formats are:</h4>
    	<ol>
    		<li>+38511226827</li>
    		<li>0038551226823</li>
    	</ol>
    	<input id="telNumber" type="text" />
    	<input type="button" value="Test" onclick="checkNumber()" />
    	<p id="result"></p>
    </body>
    </html>
    This is just a simple example of using Regular Expression to validate a telephone number. For a real world situation you should know which are all of the valid telephone number formats for a country you're trying to validate telephone number for.
    Last edited by tech_soul8; 11-06-2013 at 09:13 AM.

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