仅在表单字段有效且已填写时才显示模式框-JQuery [英] Only show modal box if the form fields are valid and filled in - JQuery

问题描述

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

I have a two field form that once the user clicks submit a modal pops up and they have to accept some terms to complete the registration process. However my two field form has required type="name" assigned to the form fields so the form fields have to be valid to proceed. So at the moment when I click submit and the form is empty I get the form field pop ups saying required field and the modal at the same time, where as I need the modal popup coming only if the form fields are filled in. So far I have tried the following:

$(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

.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>

推荐答案

使用表单提交事件代替将您的函数绑定到按钮单击上. 像这样:

Instead of bind your function to the button click, use the form submit event. Like that:

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

这篇关于仅在表单字段有效且已填写时才显示模式框-JQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！