Form validation help

[amg182]

Hi guys, any help with this would be much appreciated.

 

I have some JS validating my form to check that the fields are not empty/balnk- if they are it will highlight the fields (using css classes). It is working fine but only highlights one empty field at a time. Is it possible to get it to highlight all the fields that are empty/blank?

 

For example. If the user forgets to fill in 2 fields, it will highlight one field at a time. If the user then inputs something to that field and tries to submit it will then highlight the next filed. Instead, is it possible to have it highlight ALL empty fields?

 

function validateForm()
{

var x=document.forms["advert"]["name"].value;
if (x=="")
  {
  //changes class of li_25 to error class in order to highlight field
  document.getElementById("li_25").className = "error";
  return false;
  }
  

  var x=document.forms["advert"]["email"].value;
if (x=="")
  {
  document.getElementById("li_36").className = "error";
  return false;
  }
  
    var x=document.forms["advert"]["age"].value;
if (x=="")
  {
  document.getElementById("li_17").className = "error";
  return false;
  }

  }

 

Thanks guys

[nogray]

You can add a variable on top of your function to hold the valid status and check all the fields. If one is invalid, set the variable to false. In the end of the function, return that variable.

e.g.

function validateForm(){
var is_valid = true;
...
if (x=="")  {
    document.getElementById("li_25").className = "error";
    is_valid = false;
}
...
return is_valid;
}

[amg182]

Thanks a million nogray! Worked a treat!

 

Much appreciated

[amg182]

hi again.

 

How would i go about placing one alert messagee if one or more fields are  left blank/empty?

i.e. A message saying "Please fill in ALL fields" I can manage to do it for each input field but obiviously not practical if there are 5+ fields left blank otherwise the user is bombarded wiht alert messages!

 

Thanks again

[nogray]

You would add an array to hold the error messages and in the end alert that array

e.g.

function validateForm(){
var err_arr = [];
...if (x=="")  {
document.getElementById("li_25").className = "error";
err_arr.push(' - field name');
}
...
if (err_arr.length){
alert('Please complete the following:\n'+err_arr.join('\n'));
return false;
}
return true;
}

[amg182]

You are a true gentleman!

 

This is a great way to show error messages!

 

Once again thank you ever so much, I really appreciate it- A credit to the forum!