# Javascript



## dsulkers (Mar 15, 2005)

Form Validation:
I need to validate a form making sure a user inputed numbers only.

how can I do this using isNaN

also... how can i disable a user from entering letters in the firstplace?


----------



## Shadow2531 (Apr 30, 2001)

Here's an example of how you can allow only numbers in an input box and prevent a submit if the box is empty, but this is pointless if you turn off javascript and I hope you're not thinking about making the form only work with javascript as that would be evil. Validation should be done serverside if possible anyway. Plus, because each browser can handle events differently, your javascript code can become repetitive if you're not careful.

This example will work in modern browsers like Firefox and Opera, but won't in IE, so there is no IE-based code in this example. You'll have to work the IE part out for yourself, but you should get the basic idea. 


```
<!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" lang="en-us" xml:lang="en-us">
    <head>
        <title>allow only to input numbers</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style type="text/css">
            /*<![CDATA[*/
            html {
                background: #fff;
                color: #000;
                font-size: 1em;
            }
            body {
                margin: 0;
                padding: 8px;
            }
            form {
                margin: 0;
                padding: 5px;
            }
            /*]]>*/
        </style>
        <script type="application/x-javascript">
            //<![CDATA[
            window.addEventListener("load", function() {
                var n = document.getElementById("nums");
                n.value = "";
                n.focus();
                function check(e) {
                    var k;
                    if (e.charCode) {
                        k = e.charCode; // For Gecko
                    } else {
                        k = e.keyCode; // For Presto
                    }
                    if ( k != 37 && k != 38 && k != 39 && k != 40 && k != 35 && k != 46 && k != 8 && k != 36) {
                        if ( k < 47 || k > 57 ) {
                            e.preventDefault();
                        }
                    }
                }
                if (document.addEventListener) {
                    n.addEventListener("keypress", check, false); // For Presto
                } else {
                    n.addEventListener("keydown", check, false); // For Gecko
                }
                
                // make sure they enter something
                document.getElementById("submit").addEventListener("click", function(e) {
                    if (n.value == "") {
                        e.preventDefault();
                        alert("box cannot be empty");
                        n.focus();
                    }
                }, false);
            }, false);
            //]]>
        </script>
    </head>
    <body>
        <form action="http://www.google.com/search?q=" method="get"><div><input type="text" id="nums" /><button id="submit">submit</button></div></form>
        <div>Click submit when box is empty</div>
    </body>
</html>
```
Of course, you could just check the value of the box and if it it contains characters, don't allow a submit. It all depends how you do it, but the example will give you some hints.

Here's another hint: IE uses attachEvent("type") instead of addEventListener and IE doesn't understand type="application/x-javascript" so make sure you change that to text/javascript for IE.


----------



## Shadow2531 (Apr 30, 2001)

Since I know how much of a pain IE can be, here's an example that also works in IE.


```
<!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" lang="en-us" xml:lang="en-us">
    <head>
        <title>allow only number input</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style type="text/css">
            /*<![CDATA[*/
            html {
                background: #fff;
                color: #000;
                font-size: 1em;
            }
            body {
                margin: 0;
                padding: 8px;
            }
            form {
                margin: 0;
                padding: 5px;
            }
            /*]]>*/
        </style>
        <script type="text/javascript">
            //<![CDATA[
            
            // Cross-browser event listener
            function listenForEventIn(obj,type,func,bubble) {
                if (obj.addEventListener) {
                    obj.addEventListener(type,func,bubble); // For Presto and Gecko
                } else if ( obj.attachEvent ) {
                    obj.attachEvent("on" + type, func); // For Trident
                }
            }
            // Window.onload
            listenForEventIn(window,"load", function() {
                var n = document.getElementById("nums");
                n.value = "";
                n.focus();
                function check(e) {
                    var k;
                    if (e.charCode) {
                        k = e.charCode; // For Gecko
                    } else if (e.keyCode) {
                        k = e.keyCode; // For Presto
                    }
                    if ( k != 37 && k != 38 && k != 39 && k != 40 && k != 35 && k != 46 && k != 8 && k != 36) {
                        if ( k < 47 || k > 57 ) {
                            if ( e.preventDefault ) {
                                e.preventDefault(); // For Presto and Gecko
                            } else {
                                return false; // For Trident
                            }
                        }
                    }
                }
                if (window.addEventListener) {
                    listenForEventIn(n, "keypress", check, false); // For Presto and Gecko
                } else  {
                    listenForEventIn(n, "keydown", check, false); // For Trident
                }
                
                listenForEventIn(document.getElementById("submit"), "click", function(e) {
                    if (n.value == "") {
                          if (e.preventDefault) {
                            e.preventDefault(); // For Presto and Gecko
                        } else {
                            // For Trident
                            alert("box cannot be empty");
                            n.focus();
                            return false;
                        }
                        alert("box cannot be empty");
                        n.focus();
                    }
                }, false);

            }, false);
            //]]>
        </script>
    </head>
    <body>
        <form action="http://www.google.com/search?q=" method="get"><div><input type="text" id="nums" /><input type="submit" value="submit" id="submit" /></div></form>
        <div>Click submit when box is empty</div>
    </body>
</html>
```
Here's a more traditional method of the above.


```
<!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" lang="en-us" xml:lang="en-us">
    <head>
        <title>allow only number input</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <style type="text/css">
            body { margin: 0;  padding: 8px; }
            form { margin: 0; padding: 5px; }
        </style>
        <script type="text/javascript">
            window.onload =  function() {
                var n = document.getElementById("nums");
                n.value = "";
                n.focus();
                function check(e) {
                    if (!e) {
                        e = window.event;
                    }
                    var k;
                    if (e.charCode) {
                        k = e.charCode; // For Gecko
                    } else if (e.keyCode) {
                        k = e.keyCode; // For Presto
                    }
                    if ( k != 37 && k != 38 && k != 39 && k != 40 && k != 35 && k != 46 && k != 8 && k != 36) {
                        if ( k < 47 || k > 57 ) {
                            if ( e.preventDefault ) {
                                e.preventDefault(); // For Presto and Gecko
                            } else {
                                return false; // For Trident
                            }
                        }
                    }
                }
                if (!window.addEventListener) {
                    n.onkeydown = check; // For Trident
                } else {
                    n.onkeypress = check; // For Presto and Gecko
                }
               
                function checkIfEmpty(e) {
                    if (!e) {
                        e = window.event;
                    }
                    if (n.value == "") {
                          if (e.preventDefault) {
                            e.preventDefault(); // For Presto and Gecko
                        } else {
                            // For Trident
                            alert("box cannot be empty");
                            n.focus();
                            return false;
                        }
                        alert("box cannot be empty");
                        n.focus();
                    }
                }
                document.getElementById("submit").onclick = checkIfEmpty;
              };
        </script>
    </head>
    <body>
        <form action="http://www.google.com/search?q=" method="get"><div><input type="text" id="nums" /><input type="submit" value="submit" id="submit" /></div></form>
        <div>Click submit when box is empty</div>
    </body>
</html>
```
If you want simpler, then there's this:


```
<!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" lang="en-us" xml:lang="en-us">
    <head>
        <title>allow only num input</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script type="text/javascript">
            window.onload = function() {
                var t = document.getElementById("test");
                t.value = "";
                t.focus();
                t.onkeypress = function(e) {
                    if (!e) {e = window.event; }
                    var k = ( e.charCode || e.keyCode );
                    if ( k != 37 && k != 38 && k != 39 && k != 40 && 
                         k != 35 && k != 46 && k != 8 && k != 36) {
                        if ( k < 47 || k > 57) { return false; }
                    }
                };
            };
        </script>
    </head>
    <body>
        <div><textarea id="test"></textarea></div>
    </body>
</html>
```
I'll leave you with that for a reference. Use it to figure out how to do what you want.


----------



## Willy Duitt (Oct 17, 2003)

dsulkers said:


> Form Validation:
> I need to validate a form making sure a user inputed numbers only.
> 
> how can I do this using isNaN


It would be best if we could see an example of your form...
Are we talking about one input or numerous inputs - all requiring numbers only?

Here's an example validating one input named *numbersOnly*...


```
<form [color=blue]onsubmit="if(isNaN(this['numbersOnly'].value)){alert('not a number');return false}"[/color]>
<input type="text" name="numbersOnly">
<input type="submit">
</form>
```



dsulkers said:


> also... how can i disable a user from entering letters in the firstplace?


Here is an example of a function placed into the HEAD of the document, using both onchange and onkeyup - and can be used with numerous inputs...


```
<script type="text/javascript">
 <!--//
  function isNumber(input){
    if(input.value.length > 0 && !input.value.match(/^[0-9]+$/g)){
       input.value = input.value.replace(/[^0-9]*/g,'');
    }
  }
 //-->
</script>
</head

<body>
<form>
<input type="text" name="numbersOnly" [color=red]onchange="isNumber(this)" onkeyup="isNumber(this)"[/color]>
</form>
```
.....Willy


----------

