javascript - 仅当表单字段有效并已填写时才显示模式框 - JQuery

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>

.模态代码

<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

不要将函数绑定(bind)到按钮单击，而是使用表单提交事件。像这样:

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