Add validation for integers only?

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;
  开发者_JAVA百科          window.scrollTo(0,0);
        }
        else {
            fields[i].style.backgroundColor = "#fff";
        }
    }
if(!sendForm) {
  return false;
}
</script>

---

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

}

---

Replace:

if(!fields[i].value)

with

if(+fields[i].value || +fields[i].value === 0)

in your second validation. Basically converting the value to a number. If it's valid continue.

var fields = this.getElementsByClassName("validate"),
    fields2 = this.getElementsByClassName("validate2"), 
    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";
    }
}
for(var i = 0; i < fields2.length; i++) {
    if(+fields2[i].value && +fields2[i].value === 0) {
        fields2[i].style.backgroundColor = "#ffb8b8";
        flag=true;

        sendForm = false;
        window.scrollTo(0,0);
    }
    else {
        fields2[i].style.backgroundColor = "#fff";
    }
}

if(!sendForm) {
    return false;
}

---

Basically do the same you did with the elements with class "validate" again with elements with class "validate2", but check if the value is a number (done by regular expression). Note - if you have fields having both classes, you might have to add a little bit more logic.

var fields = this.getElementsByClassName("validate"),
    numfields = this.getElementsByClassName("validate2"),
    sendForm = true;
var 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";
    }
}
for(var i = 0; i < numfieldsfields.length; i++) {
    if((numfields[i].value.search(/^\s*\d+\s*$/) != -1) {
        numfields[i].style.backgroundColor = "#ffb8b8";
        flag=true;
        sendForm = false;
        window.scrollTo(0,0);
    }
    else {
         numfields[i].style.backgroundColor = "#fff";
    }
}

if(!sendForm) {
    return false;
}

---

This might work -

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 (hasClass(fields[i], "numeric")) {
                if (!isInteger(fields[i].value)) {
                    fields[i].style.backgroundColor = "#ffb8b8";
                    flag = true;

                    sendForm = false;
                    window.scrollTo(0, 0);
                }


                if (!sendForm) {
                    return false;
                }
            }
        }
    }
}

var isInteger_re = /^\s*(\+|-)?\d+\s*$/;

function isInteger(s) {
    return String(s).search(isInteger_re) != -1
}

function hasClass(element, cls) {
    return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

It's nothing too fancy, it just checks to see if the element has the class "numeric" then runs a regex on it to see if it's an integer. The magic happens here...

var isInteger_re = /^\s*(\+|-)?\d+\s*$/;

    function isInteger(s) {
        return String(s).search(isInteger_re) != -1
    }

    function hasClass(element, cls) {
        return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
    }

so an input with the following should get picked up...

<input type='text' class='required numeric' />

In my opinion it's worth adopting some kind of framework or plugin to avoid re-inventing the wheel here. I'm sure there are tons of viable light-weight candidates for this purpose. Personally I use jQuery so it's a no-brainer to use the bassistance validation, which i QUITE extensible and very easy to use.

Cheers!

-Derek