Validate multiple form fields in one function

Question

I have the following code that is for validating a for field as you are inputting values in the field (red for invalid and green if the field becomes valid):

function FormValidation(){
    var fn=document.getElementById("firstName").value;
    if(fn == ""){
        document.getElementById("firstName").style.borderColor = "red";
        return false;
    }else if (/^[0-9]+$/.test(document.getElementById("firstName").value)) {
        document.getElementById("firstName").style.borderColor = "red";
        return false;
    }else if(fn.length <=2){
        document.getElementById("firstName").style.borderColor = "red";
        return false;
    }else{
        document.getElementById("firstName").style.borderColor = "#679f30";
    }
}

These validations will also be required for other fields.

I tried a for loop, but it doesn't work to validate all of the forms as the code above does for the one field:

function FormValidation(){
    var array = ["firstName", "middleName", "lastName"];
    for(i=0; i < array.length; i++){
        var fn=document.getElementById(array[i]).value;
        if(fn == ""){
            document.getElementById(array[i]).style.borderColor = "red";
            return false;
        }else if (/^[0-9]+$/.test(document.getElementById(array[i]).value)) {
            document.getElementById(array[i]).style.borderColor = "red";
            return false;
        }else if(fn.length <=2){
            document.getElementById(array[i]).style.borderColor = "red";
            return false;
        }else{
            document.getElementById(array[i]).style.borderColor = "#679f30";
        }
    }
}

So my question is am I doing something wrong? Or is there a way to validate more than one form in one function without having to write the same code over and over.

Any help is much appreciated!

Thank you, Al

On which particular event of the form are you calling the function FormValidation?? It's important to know this. — Abhi
– Abhi, Commented Apr 18, 2015 at 6:07

Harigovind R · Accepted Answer · 2015-04-18 06:03:19Z

4

Pass the id as an argument for the function and access the respected parameter. So instead of writing the entire code again and again you can call the function with your specific argument. function FormValidation(id){ var fn=document.getElementById(id).value; if(fn == ""){ document.getElementById(id).style.borderColor = "red"; return false; }else if (/^[0-9]+$/.test(document.getElementById(id).value)) { document.getElementById(id).style.borderColor = "red"; return false; }else if(fn.length <=2){ document.getElementById(id).style.borderColor = "red"; return false; }else{ document.getElementById(id).style.borderColor = "#679f30"; } }

Call the function with parameter as the id you need to validate. eg return FormValidation("firstName")

answered Apr 18, 2015 at 6:03

Harigovind R

8268 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Baraa Over a year ago

Thanks, I can't believe I didn't think of this..SMH

Harigovind R Over a year ago

@Baraa Welcome but be carefull while validating names. Its tricky.. Awsme to hear it helped you.

Rohit Gupta · Accepted Answer · 2015-04-18 05:48:01Z

0

Give them the same class and then use

getElementByClass

And cycle through them

answered Apr 18, 2015 at 5:48

Rohit Gupta

4,27723 gold badges36 silver badges47 bronze badges

1 Comment

Baraa Over a year ago

I thought there isn't a getElementByClass but only a getElementByClassName ? and wouldn't this have the same effect as my array above? which doesn't work as intended.

Collectives™ on Stack Overflow

Validate multiple form fields in one function

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related