Javascript 表单提交后显示成功模式

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

以下是我的示例代码：

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

不
新用户：
输入ID
输入用户名
登录
信息：
×
在此处显示用户的用户名和id。

以下是我的表单验证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>

（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
var forms=document.getElementsByClassName（'needs-validation'）；
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}，假）；
});
}，假）；
})();

以下是我的模式脚本：

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

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
$（“#modalSuccess”）.modal（）；
});
});

---

提前感谢：）

您必须在打电话之前检查字段是否已填写

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

还要签入验证脚本

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

（功能（）{
"严格使用",；
addEventListener（'load'，function（））{
var forms=document.getElementsByClassName（'needs-validation'）；
var validation=Array.prototype.filter.call（表单，函数（表单）{
表单.addEventListener（'submit'，函数（事件）{
如果（$（'#username'）.val（）.trim（）.length>0&$（'#id'）.val（）.trim（）.length>0）{
if（form.checkValidity（）==false）{
event.preventDefault（）；
event.stopPropagation（）；
}
form.classList.add（'was-validated'）；
}
}，假）；
});
}，假）；
})();

及

$（文档）.ready（函数（）{
$（“#提交”）。单击（函数（）{
如果（$（'#username'）.val（）.trim（）.length>0&$（'#id'）.val（）.trim（）.length>0）{
$（“#modalSuccess”）.modal（）；
}否则{
警报（“填写两个字段”）；
}
});
});

检查我的其他答案它不起作用，我在modal$（文档）上的脚本上这样做了。准备（function（）{$（“#提交”）。单击（function（）{if（$（'.#username'）.val（）.length>0&$（'.#id'）.val（）.length>0{$（“#modalSuccess”）.modal（）}）；很抱歉，我仍在学习javascript和jquery。您检查了我的完整答案了吗？我尝试了其他答案，但没有显示模式您填写了两个字段？是的，我在单击“提交”时尝试了填写两个字段模式没有显示您收到通知了吗？当我提交两个空字段的表单时，通知有效

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