multiple validation

[Pain]

Hi guys. Im trying to implement a javascript validation where if a customer leaves a blank select option, then an error pops out. I was able to display one error at a time even though all fields are blank. 

function validateSurvey2()
{
 
  var err1 = document.getElementById('err1');
  var err2 = document.getElementById('err2');
  var err3 = document.getElementById('err3');
  var err4 = document.getElementById('err4');
 
  var question1 = document.survey.q1;
  var question2 = document.survey.q2;
  var question3 = document.survey.q3;
  var question4 = document.survey.q4;
 
  if(question1.selectedIndex === 0) {
    err1.style.display="inline";
    question1.focus();
    return false;
  }
 
  else {
    err1.style.display="none";
  }
  if(question2.selectedIndex === 0) {
    err2.style.display="inline";
    question2.focus();
    return false;
   
  }
  else {
    err2.style.display="none";
  }
  if(question3.selectedIndex === 0) {
    err3.style.display="inline";
    question3.focus();
    return false;
  }
  else {
    err3.style.display="none";
  }
  if(question4.selectedIndex === 0) {
    err4.style.display="inline";
    question4.focus();
    return false;
  }
  else {
    err4.style.display="none";
  }
 
 
}

This is probably because the script stops after the first 'return false'...

 

I want every block of IF executed. 

 

thanks in advance for any help:)

[netaneledri]

function validateSurvey2()
{

  var errors_count = 0;
 
  var err1 = document.getElementById('err1');
  var err2 = document.getElementById('err2');
  var err3 = document.getElementById('err3');
  var err4 = document.getElementById('err4');
 
  var question1 = document.survey.q1;
  var question2 = document.survey.q2;
  var question3 = document.survey.q3;
  var question4 = document.survey.q4;
 
  if(question1.selectedIndex === 0) {
    err1.style.display="inline";
    question1.focus();
	errors_count++;
  } else {
    err1.style.display="none";
  }
  
  if(question2.selectedIndex === 0) {
    err2.style.display="inline";
    question2.focus();
	errors_count++;
  } else {
    err2.style.display="none";
  }
  
  if(question3.selectedIndex === 0) {
    err3.style.display="inline";
    question3.focus();
	errors_count++;
  } else {
    err3.style.display="none";
  }
  
  if(question4.selectedIndex === 0) {
    err4.style.display="inline";
    question4.focus();
	errors_count++;
  } else {
    err4.style.display="none";
  }
 
  return errors_count == 0;
 
}

try that , I count every error and finaly return true / false by the errors count.

[Pain]

Wow thanks, this really helped. However i do not completely understand how it works. Could you spare some time explaining it? Thanks so much netaneledri!

[netaneledri]

Sure , let me explain :

At the start I just set new var called errors_count , this var will count how many errors we have.

Later , on each condition you wrote , I increase the errors_count if the condition return true and found an error.

At the end I return (errors_count == 0) , its mean If there are no errors (what means errors_count = 0 like in start) we will return true and the form will be submitted but if errors_count > 0 we have errors so it will be return false because errors_count now equals 0.