Boostrap表单验证多个表单在同一页面上

Question

我正在这里进行表单验证，在这三个表单中我有三个模式弹出窗口，并且验证工作正常。但是问题是，成功消息仅在第一种形式下才起作用，而没有到达最后两种形式。可能是最后一个表单成功消息未出现的问题。有人可以向我建议正确的方向吗？

$(document).ready(function() {
  $("[id^='formVal_']").bootstrapValidator({
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    submitHandler: function(validator, form, submitButton) {
      $('#success_message').css('display', 'flex').fadeIn().delay(3000).fadeOut();

      var bv = form.data('bootstrapValidator');
      // Use Ajax to submit form data
      $.post(form.attr('action'), form.serialize(), function(result) {}, 'json');
      $("[id^='formVal_']").bootstrapValidator('resetForm', true);
    },
    fields: {
      name: {
        validators: {
          nameMessage: {
            message: 'Please supply a valid name'
          },
          notEmpty: {
            message: 'Please supply your name'
          }
        }
      },
      email: {
        validators: {
          notEmpty: {
            message: 'Please supply your email address'
          },
          emailAddress: {
            message: 'Please supply a valid email address'
          }
        }
      }

    }
  })
});

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.0/css/bootstrapValidator.min.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.4.5/js/bootstrapvalidator.min.js"></script>

<div class="container">
  <div class="modal fade" id="oneModal" tabindex="-1" role="dialog" aria-labelledby="oneModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form class="well form-horizontal" action=" " method="post" id="formVal_test1">

          <!-- Text input-->

          <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input name="name" placeholder="First Name" class="form-control" type="text">
              </div>
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label">E-Mail</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
              </div>
            </div>
          </div>


          <!-- Success message -->
          <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>

          <!-- Button -->
          <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-4">
              <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>
            </div>
          </div>

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

  <!-- Second form -->
  <div class="modal fade" id="twoModal" tabindex="-1" role="dialog" aria-labelledby="twoModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form class="well form-horizontal" action=" " method="post" id="formVal_test2">

          <!-- Text input-->

          <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input name="name" placeholder="First Name" class="form-control" type="text">
              </div>
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label">E-Mail</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
              </div>
            </div>
          </div>


          <!-- Success message -->
          <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>

          <!-- Button -->
          <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-4">
              <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>
            </div>
          </div>

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

  <!-- Third form -->
  <div class="modal fade" id="threeModal" tabindex="-1" role="dialog" aria-labelledby="threeModal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <form class="well form-horizontal" action=" " method="post" id="formVal_test3">

          <!-- Text input-->

          <div class="form-group">
            <label class="col-md-4 control-label">First Name</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                <input name="name" placeholder="First Name" class="form-control" type="text">
              </div>
            </div>
          </div>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label">E-Mail</label>
            <div class="col-md-4 inputGroupContainer">
              <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span>
                <input name="email" placeholder="E-Mail Address" class="form-control" type="text">
              </div>
            </div>
          </div>


          <!-- Success message -->
          <div class="alert alert-success" role="alert" id="success_message">Success <i class="glyphicon glyphicon-thumbs-up"></i> Thanks for contacting us, we will get back to you shortly.</div>

          <!-- Button -->
          <div class="form-group">
            <label class="col-md-4 control-label"></label>
            <div class="col-md-4">
              <button type="submit" class="btn btn-warning">Send <span class="glyphicon glyphicon-send"></span></button>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>
</div>
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#oneModal">First</a>
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#twoModal">Second</a>
<a href="#" class="btn btn-lg btn-success" data-toggle="modal" data-target="#threeModal">Third</a>
</div>
<!-- /.container -->