Question

Anyone know of a good tutorial/method of using Javascript to, onSubmit, change the background color of all empty fields with class="required" ?

Answer 1

Something like this should do the trick, but it’s difficult to know exactly what you’re looking for without you posting more details:

document.getElementById("myForm").onsubmit = function() {
    var fields = this.getElementsByClassName("required"),
        sendForm = true;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ff0000";
            sendForm = false;
        }
        else {
            //Else block added due to comments about returning colour to normal
            fields[i].style.backgroundColor = "#fff";
        }
    }
    if(!sendForm) {
        return false;
    }
}

This attaches a listener to the onsubmit event of the form with id “myForm”. It then gets all elements within that form with a class of “required” (note that getElementsByClassName is not supported in older versions of IE, so you may want to look into alternatives there), loops through that collection, checks the value of each, and changes the background colour if it finds any empty ones. If there are any empty ones, it prevents the form from being submitted.

Here’s a working example.