Email Value Validation Error when submitting form

Question

I am showing a div element only after the form is submitted along with the checking of the value to ensure it is not empty. Everything is working except the email value.

After filling the name and phone field, when I click to submit the form it submits without checking the email. Any help will be appreciated.

// Show/Hide DIV after Form Submission
function mySub() {
  const user = document.getElementById('pmname').value;
  const uemail = document.getElementById('pmemail').value;
  const uphone = document.getElementById('pmphone').value;

  if (user == "") {
    document.getElementById('agy').style.display = 'none';
  } else {
    document.getElementById('agy').style.display = 'block';
  }

  if (uemail == "") {
    document.getElementById('agy').style.display = 'none';
  } else {
    document.getElementById('agy').style.display = 'block';
  }

  if (uphone == "") {
    document.getElementById('agy').style.display = 'none';
  } else {
    document.getElementById('agy').style.display = 'block';
  }
}

#agy {
  display: none;
}


  
    
      
        
        
           Jazz
          View Listings
        
      
    
  
  
    
  
  
    
  
  
    
  
  
    Hello, I am interested in ...
  
  
    
      By submitting this form I agree to Terms of Use

user_519413 · Answer

The issue is because you check the field values individually. As such, only the state of the last check is validated as it overrides the display setting of the previous two checks.

To fix this merge the if condition in to a single statement which checks for an empty value in any of the fields.

Note in the example below I also included a call to trim() to prevent whitespace being accepted as a valid entry in the fields.

// Show/Hide DIV after Form Submission
function mySub() {
  const user = document.getElementById('pmname').value.trim();
  const uemail = document.getElementById('pmemail').value.trim();
  const uphone = document.getElementById('pmphone').value.trim();

  if (user == "" || uemail == "" || uphone == "") {
    document.getElementById('agy').style.display = 'none';
  } else {
    document.getElementById('agy').style.display = 'block';
  }
  
  /*
  // same logic, slightly less readable
  var valid = user !== '' && uemail !== '' && uphone !== '';
  document.getElementById('agy').style.display = valid ? 'block' : 'none';
  */
}

#agy {
  display: none;
}


  
    
      
        
        
           Jazz
          View Listings
        
      
    
  
  
    
  
  
    
  
  
    
  
  
    Hello, I am interested in ...
  
  
    
      By submitting this form I agree to Terms of Use

Email Value Validation Error when submitting form

1 Answers