javascript - 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;
}

<form method="post" action="#">
  <div id="agy">
    <div class="agent-details">
      <div class="d-flex align-items-center">
        <div class="agent-image"><img class="rounded" src="#" alt="Jazz" width="70" height="70" /></div>
        <ul class="agent-information list-unstyled">
          <li class="agent-name"><i class="houzez-icon icon-single-neutral mr-1"></i> Jazz</li>
          <li class="agent-link"><a href="#">View Listings</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="form-group">
    <input class="form-control" name="name" id="pmname" value="" type="text" placeholder="Name" />
  </div>
  <div class="form-group">
    <input class="form-control" name="mobile" id="pmphone" value="" type="number" placeholder="Phone" />
  </div>
  <div class="form-group">
    <input class="form-control" name="email" id="pmemail" value="" type="email" placeholder="Email" />
  </div>
  <div class="form-group form-group-textarea">
    <textarea class="form-control hz-form-message" name="message" rows="4" placeholder="Message">Hello, I am interested in ...</textarea>
  </div>
  <div class="form-group">
    <label class="control control--checkbox m-0 hz-terms-of-use">
      <input type="checkbox" id="ppa" name="privacy_policy" checked="" />By submitting this form I agree to <a target="_blank" href="https://propertymakkerz.com/pm/property/sai-ashishkaranjadepanvel/">Terms of Use</a>
      <span class="control__indicator"></span>
    </label>
  </div>
  <div class="form_messages"></div>
  <button type="button" class="houzez_agent_property_form btn btn-secondary btn-full-width" onclick="mySub()"><span class="btn-loader houzez-loader-js"></span> Send Message</button>
</form>

question from:https://stackoverflow.com/questions/65848160/email-value-validation-error-when-submitting-form

Answer 1

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;
}

<form method="post" action="#">
  <div id="agy">
    <div class="agent-details">
      <div class="d-flex align-items-center">
        <div class="agent-image"><img class="rounded" src="#" alt="Jazz" width="70" height="70" /></div>
        <ul class="agent-information list-unstyled">
          <li class="agent-name"><i class="houzez-icon icon-single-neutral mr-1"></i> Jazz</li>
          <li class="agent-link"><a href="#">View Listings</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="form-group">
    <input class="form-control" name="name" id="pmname" value="" type="text" placeholder="Name" />
  </div>
  <div class="form-group">
    <input class="form-control" name="mobile" id="pmphone" value="" type="number" placeholder="Phone" />
  </div>
  <div class="form-group">
    <input class="form-control" name="email" id="pmemail" value="" type="email" placeholder="Email" />
  </div>
  <div class="form-group form-group-textarea">
    <textarea class="form-control hz-form-message" name="message" rows="4" placeholder="Message">Hello, I am interested in ...</textarea>
  </div>
  <div class="form-group">
    <label class="control control--checkbox m-0 hz-terms-of-use">
      <input type="checkbox" id="ppa" name="privacy_policy" checked="" />By submitting this form I agree to <a target="_blank" href="https://propertymakkerz.com/pm/property/sai-ashishkaranjadepanvel/">Terms of Use</a>
      <span class="control__indicator"></span>
    </label>
  </div>
  <div class="form_messages"></div>
  <button type="button" class="houzez_agent_property_form btn btn-secondary btn-full-width" onclick="mySub()"><span class="btn-loader houzez-loader-js"></span> Send Message</button>
</form>