提交表单时电子邮件值验证错误

Question

我仅在提交表单并检查值以确保它不为空之后才显示div 元素。除电子邮件值外，一切正常。

填写姓名和电话字段后，当我单击提交表单时，它会提交而不检查电子邮件。任何帮助将不胜感激。

// 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>

Answer 1

问题是因为您单独检查字段值。因此，仅验证最后一次检查的状态，因为它会覆盖前两次检查的 display 设置。

要解决此问题，请将 if 条件合并到一个语句中，该语句检查 任何 字段中的空值。

请注意，在下面的示例中，我还调用了trim()，以防止空格被接受为字段中的有效条目。

// 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>