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 5 of 5
  1. #1
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Form Validation on blur

    I am trying to have my form include these two boxes.
    One that requires 5 digit numeric input
    and another that requires the first letter to be capitalized. The capitalization is working. But im not sure how in reqexp to require the the numeric digits be = to 5 . As well as for some reason the on blur is not working. Any Suggestions?

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <html>
    
        <head>
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
            <script type="text/javascript">
    
                function validate() {
    
                    var the_input = document.getElementById('userName').value;
    
                    if (!the_input.match(/^[A-Z]$/))   {
    
                        alert('Your username must begin with a capital letter.');
    
                        return false;
    
                    } else {
    
                       
    
                        return true;
    
                    }
    
                }
               
                function zip()  {
                	var the_input = document.getElementById('zip').value;
                   if (!the_input(/^[A-Z]$/)) {
                   	       alert('You can only use numbers');
                   	       return false;
    				
    				} else {
    
                       alert('You can only use numbers!!!');
    
                        return true;
    
                    }
    
                }
               
    
            </script>
    
        </head>
    
        <body>
    
            <form action="test" method="get" name="logOn">
    
                First Name:<br />
    
                <input type="text" name="userName" id="userName" onblur="validate()" size="25" /><br />
                Zipcode:<br />
                <input type="text" name="zip" id="zip" onblur="zip()" size="25" /><br />
                
    
            
    
            </form>
    
        </body>
    
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Code:
    if (!/^[A-Z]/.test(username)) {
    alert ("The user name must start with a capital letter");
    return false;
    }
    
    
    if (/^\d{5}$/.test(field.value)) {           /// match 5 digits and nothing but
    
    if (/^\d{5}\-?\d{4}$/gi.test(field.value)) {   // 5 digits, optional hyphen, 4 digits and nothing but
    Bear in mind that if you require a zip code in USA format you will exclude non-US residents from whatever it is. That may be fine, of course.


    You can automtically capitalise the first letter of each word in a string as follows:-

    Code:
    var str1 = "jEAn-paul o'flaNAGan-macDOnald";
    str1 = str1.toLowerCase().replace(/\b[a-z]/g,function(w){return w.toUpperCase()});
    alert(str1);
    But it would seem more important to ensure that a proper name consists only of letters, hyphen, apostrophe and possibly a space.

    "Success is the ability to go from one failure to another with no loss of enthusiasm." - Sir Winston Churchill, British politician (1874 - 1965)
    Last edited by Philip M; 09-26-2012 at 09:11 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts
    For some reason now , whether or not I put in a capital letter it returns false. And the zip code function returns nothing. this is the code I used.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <html>
    
        <head>
        	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
            <script type="text/javascript">
    
                function validate() {
    
                    var the_input = document.getElementById('userName').value;
    
                    if (!/^[A-Z]/.test(userName))   {
    
                        alert('Your username must begin with a capital letter.');
    
                        return false;
    
                    } else {
    
                       alert('Your username !');
    
                        return true;
    
                    }
    
                }
               
                function zip()  {
                	var the_input = document.getElementById('zip').value;
                   if (/^\d{5}$/.test(zip)) {
                   	       alert('You can only use numbers');
                   	       return false;
    				
    				} else {
    
                       alert('You can only use numbers!!!');
    
                        return true;
    
                    }
    
                }
               
    
            </script>
    
        </head>
    
        <body>
    
            <form action="test" method="get" name="logOn">
    
                First Name:<br />
    
                <input type="text" name="userName" id="userName" onblur="validate()" size="25" /><br />
                Zipcode:<br />
                <input type="text" name="zip" id="zip" onblur="zip()" size="25" /><br />
                
    
            
    
            </form>
    
        </body>
    
    </html>

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    Code:
    if (!/^[A-Z]/.test(the_input))   {
    You ae using the same name zip for an HTML element and a Javascript function. And evaluation to either true or false both return an error mesage.

    Code:
    function checkzip()  {
    var the_input = document.getElementById('zip').value;
    if (!/^\d{5}$/.test(the_input)) {
    alert('You can only enter a 5-digit number');
    document.getElementById('zip').value = "";
    return false;
    }
    }
    As I say, why make the user re-enter his name simply because he has not started with a capital letter when you could correct that automatically?
    And is X?£$^456&*?> a valid user name?
    Last edited by Philip M; 09-27-2012 at 04:21 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    hcrosex3 (09-27-2012)

  • #5
    New Coder
    Join Date
    Sep 2012
    Posts
    32
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Ahh beginners mistakes thank you!


  •  

    Posting Permissions

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