Question

I have a script that loops through all elements with class="validate" on submit and if they’re empty, cancels the submit and changes their background color. Anybody know a way I can add a second validation within the same function that makes sure the elemnets with class="validate2" are numbers only (no words)? Here’s my script:

<script type="text/javascript" >
window.onload = function() {
document.getElementById("formID").onsubmit = function() {
    var fields = this.getElementsByClassName("validate"),
        sendForm = true,
        flag=false;
    for(var i = 0; i < fields.length; i++) {
        if(!fields[i].value) {
            fields[i].style.backgroundColor = "#ffb8b8";
            flag=true;

            sendForm = false;
            window.scrollTo(0,0);
        }
        else {
            fields[i].style.backgroundColor = "#fff";
        }
    }
if(!sendForm) {
  return false;
}
</script>

Answer 1

Try this way:

<script type="text/javascript" >
window.onload = function() {
document.getElementById("formID").onsubmit = function() {
    var fields = this.elements;
    sendForm = true;
    var flag=false;

    for(var i = 0; i < fields.length; i++) {
        if (fields[i].className == 'validate' || fields[i].className == 'validate2') {
            alert(fields[i].className);
            if (fields[i].value.length == 0) {
                fields[i].style.backgroundColor = "#ffb8b8";
                flag=true;
                sendForm = false;
                window.scrollTo(0,0);
            }
            else if (fields[i].className == 'validate2' && isNaN(Number(fields[i].value))) {
                fields[i].style.backgroundColor = "#ffb8b8";
                flag=true;
                sendForm = false;
                window.scrollTo(0,0);
            }
            else {
                fields[i].style.backgroundColor = "#fff";
            }
        }
    }

    if(!sendForm) {
        return false;
    }
}

}