Form Validation on blur

hcrosex3 · 09-26-2012, 08:40 PM

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>

Philip M · 09-26-2012, 08:58 PM

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)

hcrosex3 · 09-27-2012, 02:08 PM

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>

Philip M · 09-27-2012, 03:55 PM

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?

hcrosex3 · 09-27-2012, 05:19 PM

Ahh beginners mistakes thank you!