Form Validation: You're (likely) doing it wrong

First of all, run, don't walk, and read the following about "Usability Testing of Inline Form Validation", it goes into far more general detail, though I may follow up with a post about a morsel they don't cover. The two main categories of issues the article is concerned with are:

1. "Premature Inline Validation", and
2. "Outdated Error Messages"

Here I am chiefly concerned with the first pitfall. In fact if you look at some code I wrote, you will see I avoid the second, specifically the line setting the error message (back to) empty: errEl.innerHTML = '';

let fnameEl = document.getElementById('fname');
let lnameEl = document.getElementById('lname');

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

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

fnameEl.focus();

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

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

Unfortunately though, as written, the above will correctly display an error if the first field is tabbed through, but then if trying to shift-tab back to correct that error, it will annoyingly display an error for the second field. This sort of thing is covered in the above-referenced article.

A solution seems to be to add some "state", the following is quick and dirty and probably not perfect, but should be less annoying for users:

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';
    }
}

I've created a Gist containing the above code, both revisions being available here. And here is the follow-up post mentioned above.