Alrighty then!
I’m trying to create a simple form. The user enters a string of text, presses a button, and the JavaScript validation script does its magic, then an alert pops-up on screen to tell the user they’re correct. It isn’t working. I’ve tried various alternatives with names, ids, changing stuff around and so on. Yet, I also have an age validation script and that works fine, I’ve tried making the text validation into an age validation, but it doesn’t work. So it must be something with the form…? I’ve added both the working age validation and the not-currently-working text validation. Please, if you can (and I know you can!), help me. I’ve got Head First JavaScript, DOM Scripting, Simply JavaScript, and JavaScript: The Good Parts sprawled on my bed and I’ve been through them with nothing to help me. Otherwise, I’ve missed a page or something!
Text Validation, HTML (quick-question.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Quick Question</title>
<link rel="stylesheet" media="screen" href="quick-question.css">
</head>
<body>
<div class="quick-question">
<p class="header">Quick Question</p>
<p class="question">Who invented the World Wide Web?</p>
<form name="question-1" method="post" action="#">
<label for="answer">Answer:</label>
<input type="text" value="" id="answer-1" name="answer-1" class="required" />
<input type="submit" value="Submit" id="btnSubmit" name="btnSubmit" />
</form>
</div>
<script src="quick-question.js"></script>
</body>
</html>
Text Validation, JavaScript (quick-question.js)
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function fnAnswers() {
if (!document.getElementById) return false;
// Answer Area
var answerArea = document.question-1.answer-1.value;
// Answer Variables
var ansOne = "Tim Berners-Lee";
// Question & Answer Logic
if (answerArea == ansOne) {
alert("Correct!");
}
}
function fnSubmitAnswer() {
if (!document.getElementById) return false;
var btnSubmit = document.getElementById("btnSubmit");
btnSubmit.onclick = fnAnswers;
}
addLoadEvent(fnSubmitAnswer);
And, as I said, the working age validation:
Age Validation, HTML (age-checker.html)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Age Checker</title>
<link rel="stylesheet" type="text/css" media="screen" href="stylesheet.css" />
<script type="text/javascript" src="age-checker.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Age Checker</h1>
<p>Type your age in the form field below. You will receive a different popup alert depending
on your age. If you are younger than 18 years old then you will be warned however, if you are
older than 18 then you will be welcomed. Try it!</p>
<form name="myform">
<input type="text" name="myagefield" id="myagefield" value="" />
<input type="button" name="btnClick" id="btnClick" value="Click" />
</form>
</div>
</body>
</html>
Age Validation, JavaScript (age-checker.js)
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
function fnCheckAge() {
if (!document.getElementById) return false;
var myAge = document.myform.myagefield.value;
if (myAge > 18)
{
alert("Welcome.");
}
else
{
alert("Sorry you are too young.");
}
}
function fnClickCheck() {
if (!document.getElementById) return false;
var btnClick = document.getElementById("btnClick");
btnClick.onclick = fnCheckAge;
}
addLoadEvent(fnClickCheck);
So, any takers?
Tsk tsk!
But there are two problems with that, for me at least. That solution uses innerHTML which isn’t part of the JavaScript standard, and I want to keep to the standards, which is why I’m trying to get the standards based version to work that Jeremy Keith uses in his DOM Scripting book. Also, when I try to implement that externally it gives me the same result as my existing script, it appears for a flash of a second then disappears.
I don’t think you’re sacrificing anything by using it, and you’re gaining a few things.