Question

我创建了一个包含用户名和ID文本框的表单，我想显示提交表单后包含用户名和ID值的成功模式让用户看到他的用户名和ID，我的表单上也有一个验证，现在我的问题是当我单击提交时文本字段为空的按钮也将显示验证，也将显示成功模式。

这是我的示例代码：

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<button type="button" class="btn" data-dismiss="modal" data-toggle="modal" data-target="#exampleModal1" style=" color:#fff; background:#00bcd4" onClick="incrementValue()" value="Increment Value">No</button>

 <div class="modal fade right" id="exampleModal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="false">
 <div class="modal-dialog  modal-full-height modal-right" role="document">
    <div class="modal-content">
      <div class="modal-header blue accent-1">
       <h3 class="mt-2" style="color:white;"><i class="fa fa-user-circle"></i> New User :</h3>
       <a href="test1.php" button type="btn" class="close"  aria-label="Close">
          <span aria-hidden="true">&times;</span></a>      </div>
      <div class="modal-body" style="height:300px">
        <form class="needs-validation "  method="post" novalidate >
        <div class="row">
          <div class="col">
             <div class="md-form mt-0">
               <input type="text" class="form-control"  name="id" placeholder="ID" style="margin-top:-10px" id="id" required >
               <div class="invalid-feedback">
                Enter ID    </div>
            </div>
        </div>
        <div class="col">
            <div class="md-form mt-0">
                <input type="text" class="form-control" placeholder="Username" name="username" style="margin-top:-10px" id="username" required >
                 <div class="invalid-feedback">
                  Enter Username     </div>
            </div>
        </div>
     </div>
     <div class="text-center mt-2" style="bottom:0; margin-bottom:10px;">
           <button type="submit" id="submit" class="btn btn-info"   style="width:95%;"
           >Log in <i class="fa fa-sign-in ml-1"></i></button>
          </div>
    </form>
    </div>
    </div>
  </div>
  </div>



  <div class="modal fade" id="modalSuccess" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" >
    <div class="modal-dialog" role="document" style="width:85%" >
        <div class="modal-content">

            <div class="modal-header blue accent-1">
                <h4 class="modal-title" id="myModalLabel" style="color:white;"><i class="fa fa-lock"> Info:</i></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <div class="modal-body">

              display user's username and id here.

            </div>

            <div class="modal-footer">

                 <a class="btn btn-primary" href="test1.php" > Confirm</a>

            </div>
        </div>
    </div>
</div>

这是我的表单验证Javascript

<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
  </script>

这是我的模态脚本：

<script>
$(document).ready(function(){
    $("#submit").click(function(){
        $("#modalSuccess").modal();
    });
});
</script>

提前谢谢：）

Answer 1

您必须在致电

之前检查字段是否已填写

$("#modalSuccess").modal();

还要签入验证脚本

Answer 2

<script>
(function() {
  'use strict';
  window.addEventListener('load', function() {
    var forms = document.getElementsByClassName('needs-validation');
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if($('#username').val().trim().length > 0 && $('#id').val().trim().length > 0) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }
      }, false);
    });
  }, false);
})();
  </script>

和

<script>
  $(document).ready(function(){
    $("#submit").click(function(){
      if($('#username').val().trim().length > 0 && $('#id').val().trim().length > 0) {
         $("#modalSuccess").modal();
      } else {
        alert('Fill in both fields');
      }
    });
  });
</script>

提交表单后显示成功模式

2 个答案: