邮件表单提交，即使验证失败

Posted 2023-05-09

【中文标题】邮件表单提交，即使验证失败

【英文标题】：Mail-form submits, even after validation fail

【发布时间】：2020-01-31 12:24:49

【问题描述】：

尝试通过对提交表单进行简单的验证检查来运行此代码。错误消息弹出，但表单仍然被提交。谁能指出我正确的方向。

function validateForm() 
  //Validate Name
  var title = $("#name").val();
  if (title == "" || title == null) 
    alert("Please enter");
    return false;
  
  //Validate Title
  var title = $("#title").val();
  if (title == "" || title == null) 
    alert("Please enter");
    return false;
  
  //Validate Company
  var title = $("#company").val();
  if (title == "" || title == null) 
    alert("Please enter");
    return false;
  
  // Validate Email
  var email = $("#email").val();
  if ((/(.+)@(.+)2,\.(.+)2,/.test(email)) || email == "" || email == null)  else 
    alert("Please enter");
    return false;
  
  return true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="POST" action="contact.php" onsubmit="return validateForm()">
  <input type="text" placeholder="Name :" id="name" name="name">
  <input type="text" placeholder="Title :" id="title" name="title">
  <input type="text" placeholder="Company :" id="company" name="company">
  <input type="email" placeholder="Email :" id="email" name="email">
  <input type="submit" value="Submit" id="sbmt">
</form>

【问题讨论】：

我将您的逻辑放入一个 sn-p 中，它似乎可以正常工作。如果没有阻止表单提交，那么很可能是您的 JS 代码中发生了错误，并且 return false; 语句没有被命中。检查控制台/

也许将onsubmit="return validateForm()" 更改为onsubmit="validateForm()"。甚至更好：不要使用内联 javascript。

如果用户禁用了 Javascript 会怎样？永远不要单独依赖客户端验证，始终使用服务器端验证

@Alex 这样做不会改变结果。它仍然会发送电子邮件。

【参考方案1】：

您需要添加一个事件侦听器来阻止默认功能，在这种情况下是提交表单。即function validateForm(e)，然后在函数内部添加e.preventDefault()这一行。

function validateForm(e) 
  e.preventDefault();
  //Validate Name
  var title = $("#name").val();
  if (title == "" || title == null) 
    alert("Please enter");
    return false;
  
  //Validate Title
  var title = $("#title").val();
  if (title == "" || title == null) 
    alert("Please enter");
    return false;
  
  //Validate Company
  var title = $("#company").val();
  if (title == "" || title == null) 
    alert("Please enter");
    return false;
  
  // Validate Email
  var email = $("#email").val();
  if ((/(.+)@(.+)2,\.(.+)2,/.test(email)) || email == "" || email == null)  else 
    alert("Please enter");
    return false;
  
  return true;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="contactform" method="POST" action="contact.php" onsubmit="return validateForm()">
  <input type="text" placeholder="Name :" id="name" name="name">
  <input type="text" placeholder="Title :" id="title" name="title">
  <input type="text" placeholder="Company :" id="company" name="company">
  <input type="email" placeholder="Email :" id="email" name="email">
  <input type="submit" value="Submit" id="sbmt">
</form>

【讨论】：

对不起安东尼，这也不起作用。当我将所有内容留空但仍会发送表单时，它会进行验证。这和contact.php有关系吗？