 |
|
|
||||||||
Before you post, read our:  |
|
|
Thread Tools | Rate Thread |
|
|
|
||||||||
|
|
|
Thread Tools | Rate Thread |
01-10-2012, 09:39 AM
|
PM User | #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>
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>
|
|
|
|
01-10-2012, 09:57 AM
|
PM User | #2 |
|
Supreme Master coder!  
Join Date: Feb 2009
Posts: 16,535
Thanks: 41
Thanked 2,714 Times in 2,689 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 = ... Code:
document.getElementById("ignErrors").innerHTML = ...
__________________
"The world can bring you gifts, or poison in a jewelled cup." -- Chen Liu, as quoted by his brother Chen Tai, in Under Heaven by Guy Gavriel Kay |
|
|
|
|
01-10-2012, 10:06 AM
|
PM User | #3 | |
|
New to the CF scene Join Date: Jan 2012
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
|
Quote:
|
|
|
|
|
|
01-10-2012, 10:14 AM
|
PM User | #4 |
|
Supreme Master coder!
Join Date: Feb 2009
Posts: 16,535
Thanks: 41
Thanked 2,714 Times in 2,689 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>
__________________
"The world can bring you gifts, or poison in a jewelled cup." -- Chen Liu, as quoted by his brother Chen Tai, in Under Heaven by Guy Gavriel Kay |
|
|
|
|
01-10-2012, 10:17 AM
|
PM User | #5 | |
|
New to the CF scene Join Date: Jan 2012
Posts: 5
Thanks: 0
Thanked 0 Times in 0 Posts
|
Quote:
Maybe its not working for me because I'm trying to show the text in a div. not a span like you are? |
|
|
|
|
|
01-10-2012, 10:21 AM
|
PM User | #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>
|
|
|
|
|
| Bookmarks |
| Thread Tools | |
| Rate This Thread | |
|
|
