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

Posted 2023-05-09

【中文标题】提交表单时电子邮件值验证错误

【英文标题】：Email Value Validation Error when submitting form

【发布时间】：2021-04-27 02:20:24

【问题描述】：

我仅在提交表单并检查值以确保它不为空之后才显示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="#"    /></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>

【参考方案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="#"    /></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>

【讨论】：

非常感谢您纠正我。这现在有效。所以在验证值时调用修剪函数总是一个好习惯吗？

没问题，很高兴为您提供帮助。 '在验证值时调用修剪函数总是一个好习惯吗？' 我会说是的，但可能存在空格有效的情况，因此请根据具体情况进行判断.

如果我想问更多关于现有代码的问题，我是否应该针对同样的权利创建一个新问题？

是的，如果您有其他问题，最好开始一个新问题