Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts

    JS text field validation(letters only, or numbers only)

    Hey everyone, Im trying to do a text field validation challenge for class.
    I am trying to figure out how to not allow any numbers to the string txt box's, and no letters to the number txt box's.
    I am storing the var's by getElementById..

    Here is what I have. I am more so concentrating on using regular expressions on the "city" if statement. But it seems to still accept numbers…(is it maybe how I'm trying to display it)

    Thanks in advance..
    Code:
    var errorMessage = "";
    
    		if(firstName.value == "")
    		{
    			errorMessage = errorMessage + "Enter a valid first name.\n";
    			document.getElementById("FirstNameID").focus(); 
    		} 
    
    		if(lastName.value == "")
    		{
    			errorMessage = errorMessage + "Enter a valid last name.\n";
    		}
    		if(age.value =="" || age.value <= 0)
    		{
    			errorMessage = errorMessage + "Enter a valid age. No strings\n";
    			document.getElementById('AgeID').value = '';
    		}
    
    		if(city.value == "" || city.value.length <3 || /^[a-zA-Z]+$/.test(city.value))
    		{
    			errorMessage = errorMessage + "Enter a valid city, more than 3 char.\n";
    		}
    		if(address.value=="")
    		{
    			errorMessage = errorMessage + "Enter a valid address.\n";
    		}
    	
    		
    
    		//displays error messages
    		if(firstName.value=="" || lastName.value == "" || age.value=="" || age.value <=0 || city.value=="" || city.value.length < 3 || /^[a-zA-Z]+$/.test(city.value) || address.value == "")
    		{
    			alert(errorMessage);
    
    		}
    
    		else{
    			alert("success");
    		}

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Code:
    if  (errorMessage) {
        alert(errorMessage);
    }

  • #3
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thanks Glenn,

    It cleans it up a lot better, but it still accepts numbers in the city text field

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    You have to reverse condition for the regex check.

    Code:
    !/^[a-zA-Z]+$/.test(city.value)

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Btw, your regex for city will fail for cities with punctuations and/or spaces (e.g. St. Louis)

  • #6
    New Coder
    Join Date
    Jan 2013
    Posts
    19
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by glenngv View Post
    Btw, your regex for city will fail for cities with punctuations and/or spaces (e.g. St. Louis)
    Is there any way to fix that?
    Were learning regex next week in class, i've just been trying to read up on it online to get a little head start. Thanks for the help so far.

    Works great though, slipped by mind to use the "!", you guys truly help me become a better programmer with the little experience I have, the top members here should be our profs. Thanks!
    Last edited by diceman93; 01-29-2014 at 11:34 PM.

  • #7
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Do you really want to validate the city name? You'll never know you would encounter an unusual city name such as Hill Number 1 in Alabama.

    https://maps.google.com/maps?q=Hill+...m&z=15&iwloc=A

    There are also cities with just 2 letters.

  • #8
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,071
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    Different approach if you truly want numbers or alpha only...
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> Untitled </title>
    
    </head>
    <body>
    <script type="text/javascript">
    String.prototype.extractN = function() { return this.replace(/\D+/g,''); }
    String.prototype.extractA = function() { return this.replace(/\d+/g,''); }
    
    var str = '';
    var tmp = '';
    tmp = '123abc';  str += tmp + ' to extractN() gives: '+tmp.extractN()+'\n';
                     str += tmp + ' to extractA() gives: '+tmp.extractA()+'\n';
    
    tmp = '1a2b3c';  str += tmp + ' to extractN() gives: '+tmp.extractN()+'\n';
                     str += tmp + ' to extractA() gives: '+tmp.extractA()+'\n';
    
    tmp = 'abc123';  str += tmp + ' to extractN() gives: '+tmp.extractN()+'\n';
                     str += tmp + ' to extractA() gives: '+tmp.extractA()+'\n';
    alert(str);
    </script>
    
    </body>
    </html>


  •  

    Posting Permissions

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