Question

我正在尝试在.php文件中创建一个验证表单，因此它的工作方式是，一旦完成字段验证，表单就会被提交。我的表单虽然已经提交但是为此我需要按两次提交按钮。下面是代码，问题主要在脚本部分。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">

  <title></title>
  <style type="text/css">
    .container{
      margin-top: 20px;
      width: 500px;
    }
    #content{
      resize: none;
    }
    #success{
      display: none;
    }
    #failure{
      display: none;
    }
  </style>
<body>
  <div class="container">
  <h1 class="display-3">Get in Touch</h1>
  <div class="alert alert-danger" role="alert" id="failure">
</div>
<div class="alert alert-success" role="alert" id="success">
  <strong>Well done!</strong> We will get back to you ASAP.
</div>
  <form>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="subject">Subject</label>
    <input type="text" class="form-control" id="subject">
  </div>
  <div class="form-group">
    <label for="content">Content</label>
    <textarea class="form-control" id="content" rows="3"></textarea>
  </div>

  <button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>

  </div>
</body>
 <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>


<script type="text/javascript">
  $( "form" ).submit(function( event ) {
  event.preventDefault();
  var missing="";
  if($("#email").val()=="")
  {
    missing=missing+"<p>Email is Missing</p><br>"
  }
   if($("#content").val()=="")
  {
    missing=missing+"<p>Content is Missing</p><br>"
  }
   if($("#subject").val()=="")
  {
    missing=missing+"<p>Subject is Missing</p><br>"
  }
  if(missing!="")
  {
    $("#failure").html(" <strong>Oh snap!</strong><br>."+missing);
    $("#failure").show();
  }
  else{
    $("#failure").hide();
    $("form").off("submit").submit();    <- Problematic line 
  }
});
</script>
</body>
</html>

Answer 1

问题在于：

$("form").off("submit").submit()

而不是使用preventDefault来保持表单提交以检查验证，并在验证成功时使用以下方式提交表单：

$("form").submit();

Answer 2

.off仅删除使用.on添加的事件。它不会删除本机事件或类似的事件。

您已使用event.preventDefault()停止提交原生表单，这是正确的。

因此，一旦验证完成，只需$("form").submit();就足以以编程方式提交表单。

P.S。我假设您也在服务器（PHP）方面验证您的表单？ JavaScript验证非常适合增强用户体验，但您无法依赖它，因为恶意用户（或机器人）可以通过操纵页面源轻松更改，或者完全忽略它并发布到您的URL。如果您重视服务器和数据的完整性，则必须始终在服务器端验证表单。

Answer 3

您可以使用$("form").off("submit").submit();

代替this.submit();

Answer 4

尝试切换2个功能的顺序：

$("form").submit().off("submit");

关闭FUNCTION jquery

4 个答案: