提交表单后显示成功模式

Question

I created a form inside has username and id textbox, I want to display a success modal that contains the value of username and id after form submit to let the user see his username and id, And also i have an validation on my form , Now my problem is when i click submit button with empty textfields the validation appear also the success modal also appear.

here is my sample code:

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

here is my validation javascript for my form:

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

here is my script for my modal:

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

Advance Thanks :)

Answer 1

You have to check if the fields are filled in before calling

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

Also check in the validation script

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>

And

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