dexygen/correcting-annoying-validation.html

## correcting-annoying-validation.html
<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<style>
		label {
			display: inline-block;
			width: 96px;
		}
	</style>
</head>

<body>
	<div><label>First Name</label><input id="fname" /></div>
	<div id="err4-fname" style="color: red"></div>
	<div><label>Last Name</label><input id="lname" /></div>
	<div id="err4-lname" style="color: red"></div>
	<div><label>City</label><input id="city" /></div>

	<script>
		let fnameEl = document.getElementById('fname');
		let lnameEl = document.getElementById('lname');
		let lastError;

		function confirmEntry() {
		    let errEl = document.getElementById('err4-' + this.id);

			if (this.value) {
				errEl.innerHTML = '';
				lastError = '';
			}
			else if (lastError) {
			    lastError.focus();
			}
			else {
			    lastError = this;
				errEl.innerHTML = 'The above field is required';
			}
		}

		fnameEl.focus();

		fnameEl.addEventListener('blur', function() {
			confirmEntry.call(this);
		});

		lnameEl.addEventListener('blur', function() {
			confirmEntry.call(this);
		});
	</script>
</body>

</html>
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<style>
	label {
	display: inline-block;
	width: 96px;
	}
	</style>
	</head>

	<body>
	<div><label>First Name</label><input id="fname" /></div>
	<div id="err4-fname" style="color: red"></div>
	<div><label>Last Name</label><input id="lname" /></div>
	<div id="err4-lname" style="color: red"></div>
	<div><label>City</label><input id="city" /></div>

	<script>
	let fnameEl = document.getElementById('fname');
	let lnameEl = document.getElementById('lname');
	let lastError;

	function confirmEntry() {
	let errEl = document.getElementById('err4-' + this.id);

	if (this.value) {
	errEl.innerHTML = '';
	lastError = '';
	}
	else if (lastError) {
	lastError.focus();
	}
	else {
	lastError = this;
	errEl.innerHTML = 'The above field is required';
	}
	}

	fnameEl.focus();

	fnameEl.addEventListener('blur', function() {
	confirmEntry.call(this);
	});

	lnameEl.addEventListener('blur', function() {
	confirmEntry.call(this);
	});
	</script>
	</body>

	</html>