...

View Full Version : Javascript Form onkeyup Validation Error



Depetrify
01-10-2012, 08:39 AM
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.


<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..


<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>

Old Pedant
01-10-2012, 08:57 AM
(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??


... onkeyup="return validateIGN(this.value);" ...



(2) wrong

document.getElementById.ignErrors.innerHTML = ...

right:

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.

Depetrify
01-10-2012, 09:06 AM
(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??


... onkeyup="return validateIGN(this.value);" ...



(2) wrong

document.getElementById.ignErrors.innerHTML = ...

right:

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. !

Old Pedant
01-10-2012, 09:14 AM
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:


<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>

Depetrify
01-10-2012, 09:17 AM
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:


<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?

Depetrify
01-10-2012, 09:21 AM
Still not working when I use a span.. let me just put everything I have so far here..


<!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>

Depetrify
01-10-2012, 09:48 AM
Ok, ur script worked... still don't understand how but thanks a ton!! <3



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum