Question

我有一个两个字段的表单，一旦用户单击提交，就会弹出一个模式对话框，他们必须接受一些条款才能完成注册过程。但是，我的两个字段表单已将required type="name"分配给了表单字段，因此表单字段必须有效才能继续。因此，当我单击“提交”并且表单为空时，我会看到表单字段弹出窗口同时显示必填字段和模态，因为我需要模态弹出窗口，仅当填写表单字段时才出现。我尝试了以下方法：

$(document).ready(function() {
  $('.btn').click(function() {
    $('.modal').addClass('active');
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="login-form" action="" method="post">
  <div class="form-group">
    <label class="form-label" for="password">Password</label>
    <input class="form-input" required type="password" name="password" id="password" placeholder="New Password" autocomplete="off">
    <label class="form-label" for="retype">Retype password</label>
    <input class="form-input" required type="password" name="retype" id="retype" placeholder="Repeat Password" autocomplete="off">
    <input type="submit" class="btn btn-primary sub-btn" value="Submit">
  </div>
</form>

.modal code

<div class="modal" id="modal-id">
   <a href="#close" class="modal-overlay" aria-label="Close"></a>
   <div class="modal-container">
      <div class="modal-header">
         <a class="text-primary text-uppercase text-bold text-small float-right close" href="#modals" aria-label="Close">Close<i
            class="icon icon-close icon-right"></i></a>
         <div class="modal-title">
            <!-- content here -->
         </div>
      </div>
      <div class="modal-body">
         <div class="content">
            <!-- content here -->
         </div>
      </div>
   </div>
</div>

Answer 1

使用表单提交事件，而不是将功能绑定到按钮单击。像这样：

  $(document).ready(function () {
    $("#login-form").submit(function (e) {
        e.preventDefault();
        $(".modal").addClass("active");
    });
  });

仅在表单字段有效且已填写时才显示模式框-JQuery

1 个答案: