Question

I am using the below code to check my form text boxes, if they are blank .

function myFunction(){
    var week_no=document.getElementById("week_no").value;
    var date_rep=document.getElementById("date_rep").value;


    if(week_no==null || week_no=="")
    {
    alert("week_no field must be filled out");
    document.getElementById("week_no").style.background="pink";
    document.getElementById("week_no").focus();
    return false ;
    }
    if(date_rep==null || date_rep=="")
     {
    alert("date_rep field must be filled out");
    document.getElementById("date_rep").style.background="pink";
    document.getElementById("date_rep").focus();

    return false;
    }
}

I call this JavaScript function from my HTML as following.

<form id="form1" name="form1" method="post" onsubmit="return myFunction()" action="insert_alert.php" >    

My form is so lengthy that I can’t make the variables and apply the checks on individual fields. It would be my pleasure if someone guide me to reduce my labor.

Answer 1

You can iterate all inputs like this:

var inputs =  document.getElementById("form1").getElementsByTagName("input");
for(var i=0;i<inputs.length;i++) {
    var inp = inputs[i];
    if(inp.value == null || inp.value == "") {
        inp.style.background="pink";
    }
}