Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Correcting Annoying Validation, versioning until corrected
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.