Text Validation Not Working

JavaScript
21

As markbrown noted, innerHTML is faster, less code than the DOM way, and will be part of the HTML5 spec. Additionally, the books you reference are from '05 & '08. Alot has changed since then - not saying the books are bad, just the web moves fast.

Now, other DOM methods are ok to use as well, when needed. Let’s take another look at your code, using my edits form the quick code review with multiple questions:


<head>
	<meta charset="utf-8">
	<style>
		.incorrect { color: red; }
		.correct { color: green; }
	</style>
</head>
<body>
	<div>
		<p>Quick Questions</p>
		<form id="questionForm" method="post" action="#">

			<p id="questionOne">Who invented the World Wide Web?			
				<label for="answerOne">Answer:</label>
				<input type="text" value="" id="answerOne" name="answerOne" />
			</p>
			
			<p id="questionTwo">What does WWW stand for?
				<label for="answerTwo">Answer:</label>
				<input type="text" value="" id="answerTwo" name="answerTwo" />
			</p>				
			<input type="submit" value="Submit" id="btnSubmit" name="btnSubmit" />
		</form>
	</div>



var frm = document.getElementById('questionForm'),
	answers = [
		{ field: 'answerOne', answer: 'Tim Berners-Lee' },
		{ field: 'answerTwo', answer: 'World Wide Web' }
	], i, el, respEl;

// Source: http://www.netlobo.com/javascript-insertafter.html
function insertAfter( referenceNode, newNode ) {
	referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}			

frm.onsubmit = function() {
	for( i = 0; i < answers.length; i++ ) {
		// Remove the response element, if it exists
		respEl = document.getElementById(answers[i].field + 'Response');
		if( respEl ) {
			respEl.parentNode.removeChild(respEl);
		}
		// Create the response element, the add it after the text input
		el = document.getElementById(answers[i].field);
		respEl = document.createElement('p');
		respEl.setAttribute('id', answers[i].field + 'Response');
		insertAfter(el, respEl);

		if( el.value !== answers[i].answer ) {
			respEl.setAttribute('class','incorrect');
			respEl.innerHTML = 'Wrong';
		} else {
			respEl.setAttribute('class','correct');
			respEl.innerHTML = 'Right';
		}
	}
	return false;
};

here I am using pure Javascript, DOM methods, and innerHTML as well.

22

A little late here, but Simply Javascript describes both preventDefault and the IE (6-8) method, and shows how to assign them both to a new function that works on everyone.