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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Form onkeyup Validation Error

    I'm trying to output something in a separate div if the information entered in the form is invalid. It is simply not working, no errors.

    Code:
    <script type="text/javascript" language="javascript">
        function validateIGN(ign) {
            var validign = /^[a-zA-Z0-9]{1,30}$/;
            if (!validign.test(ign)) {
                document.getElementById.ignErrors.innerHTML = "<p>Your IGN is not formatted properly.";
                
            }
            else {
                
            }
        }
        </script>
    Heres the HTML where the onkeyup is..

    Code:
    <form name= "newsletter" class="newsletter" action="doNewsletter.php" method="post">
        <h2>Fill out this form if you want to be notified when the website is up!</h2><br/>
        <center><table class="twoslot">
        <tr>
        	<td>IGN(In Game Name):</td><td><input type="text" name="ign" onkeyup="return validateIGN(newsletter.ign.value);" /></td> 
        </tr>
        		<br/>
        <tr>
        	<td>E-mail:</td><td><input type="text" name="email" /></td> 
        </tr>
        <br/>
        <tr>
        	<td>
        	<center>
        <input type="submit" value="Submit" />
        	</center>
        	</td>
        </tr>
        </table></center>
        <span style="font-size: .5em;">This is not working yet</span>
        </form>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    (1) You can't use the bare name of a <form> as an object reference (except maybe in MSIE). But why would you use the form reference when you just want the value of the current field??
    Code:
    ... onkeyup="return validateIGN(this.value);" ...

    (2) wrong
    Code:
    document.getElementById.ignErrors.innerHTML = ...
    right:
    Code:
    document.getElementById("ignErrors").innerHTML = ...
    (3) But you don't *HAVE* any element with the id ignErrors so that code will never be able to do anything, anyway.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    (1) You can't use the bare name of a <form> as an object reference (except maybe in MSIE). But why would you use the form reference when you just want the value of the current field??
    Code:
    ... onkeyup="return validateIGN(this.value);" ...

    (2) wrong
    Code:
    document.getElementById.ignErrors.innerHTML = ...
    right:
    Code:
    document.getElementById("ignErrors").innerHTML = ...
    (3) But you don't *HAVE* any element with the id ignErrors so that code will never be able to do anything, anyway.
    I've fixed all of that, still not working. There is a div called ignErrors I just didn't include it in this post. !

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,133
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    Works perfectly okay for me.

    If by "not working" you mean it's not testing for the kind of IGN you expect, then maybe your regular expression is wrong.

    Are you aware that, as written, your regular expression accepts any input that consists of only letters and digits and is any number of characters long, from 1 to 30?

    Oh...and one goof in your code: You don't clear the innerHTML when the IGN *is* correct, so if you had previously put the "no good" message there, it will stay there.

    Oh, w.t.h.

    Here, my version, slightly simplified from yours:
    Code:
    <html>
    <head>
    <script type="text/javascript" language="javascript">
        function validateIGN(ign) {
            var validign = /^[a-zA-Z0-9]{1,30}$/;
            var msg = validign.test(ign) ? " IS " : " is NOT ";
            document.getElementById("ignErrors").innerHTML = 
                    "<p>Your IGN" + msg + "formatted properly.";
        }
    </script>
    </head>
    <body>
    <form name= "newsletter" class="newsletter" action="doNewsletter.php" method="post">
        <h2>Fill out this form if you want to be notified when the website is up!</h2><br/>
        <center><table class="twoslot">
        <tr>
        	<td>IGN(In Game Name):</td><td><input type="text" name="ign" onkeyup="validateIGN(this.value);" /></td> 
        </tr>
        		<br/>
        <tr>
        	<td>E-mail:</td><td><input type="text" name="email" /></td> 
        </tr>
        <br/>
        <tr>
        	<td>
        	<center>
        <input type="submit" value="Submit" />
        	</center>
        	</td>
        </tr>
        </table></center>
        <span id="ignErrors">This is not working yet</span>
        </form>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Works perfectly okay for me.

    If by "not working" you mean it's not testing for the kind of IGN you expect, then maybe your regular expression is wrong.

    Are you aware that, as written, your regular expression accepts any input that consists of only letters and digits and is any number of characters long, from 1 to 30?

    Oh...and one goof in your code: You don't clear the innerHTML when the IGN *is* correct, so if you had previously put the "no good" message there, it will stay there.

    Oh, w.t.h.

    Here, my version, slightly simplified from yours:
    Code:
    <html>
    <head>
    <script type="text/javascript" language="javascript">
        function validateIGN(ign) {
            var validign = /^[a-zA-Z0-9]{1,30}$/;
            var msg = validign.test(ign) ? " IS " : " is NOT ";
            document.getElementById("ignErrors").innerHTML = 
                    "<p>Your IGN" + msg + "formatted properly.";
        }
    </script>
    </head>
    <body>
    <form name= "newsletter" class="newsletter" action="doNewsletter.php" method="post">
        <h2>Fill out this form if you want to be notified when the website is up!</h2><br/>
        <center><table class="twoslot">
        <tr>
        	<td>IGN(In Game Name):</td><td><input type="text" name="ign" onkeyup="validateIGN(this.value);" /></td> 
        </tr>
        		<br/>
        <tr>
        	<td>E-mail:</td><td><input type="text" name="email" /></td> 
        </tr>
        <br/>
        <tr>
        	<td>
        	<center>
        <input type="submit" value="Submit" />
        	</center>
        	</td>
        </tr>
        </table></center>
        <span id="ignErrors">This is not working yet</span>
        </form>
    </body>
    </html>
    Yeah I want anything that is letters or numbers to be okay, its just a username.

    Maybe its not working for me because I'm trying to show the text in a div. not a span like you are?

  • #6
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Still not working when I use a span.. let me just put everything I have so far here..

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script type="text/javascript" language="javascript"> 
    function validateForm()
    {
    var x=document.forms["newsletter"]["email"].value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      {
      alert("Not a valid e-mail address");
      return false;
      }
    }
    </script>
    <script type="text/javascript" language="javascript">
    function validateIGN(ign) {
        var validign = /^[a-zA-Z0-9]{1,30}$/;
        if (!validign.test(ign)) {
            document.getElementById.("ignErrors").innerHTML = "<p>Your IGN is not formatted properly.";
            
        }
        else {
            
        }
    }
    </script>
    <title>zanderfever TV</title>	
    </head>
    <body>
    	
    	<div class="banner">
    		<img src="images/coming_soon.jpg">
    	</div>
    	
    	<form name= "newsletter" class="newsletter" action="doNewsletter.php" method="post">
    <h2>Fill out this form if you want to be notified when the website is up!</h2><br/>
    <center><table class="twoslot">
    <tr>
    	<td>IGN(In Game Name):</td><td><input type="text" name="ign" onkeyup="return validateIGN(this.value);" /></td> 
    </tr>
    		<br/>
    <tr>
    	<td>E-mail:</td><td><input type="text" name="email" /></td> 
    </tr>
    <br/>
    <tr>
    	<td>
    	<center>
    <input type="submit" value="Submit" />
    	</center>
    	</td>
    </tr>
    </table></center>
    <span style="font-size: .5em;">This is not working yet</span>
    </form>
    	<div id="ignErrors"</div>
    	
    </body>
    </html>

  • #7
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, ur script worked... still don't understand how but thanks a ton!! <3


  •  

    Posting Permissions

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