Question

如何在用户验证表单时打开模态？ S'inscrire

    <div class="modal fade" id="registration" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-body">
            <h3 class="modal-title">Merci !</h3>
          </div>
        </div>
      </div>
    </div>

Answer 1

当用户点击提交按钮时，您可以使用模式id或class打开它。假设你有这个HTML

<form id="submit-button">
    //form components
</form>

然后你可以编写这个JQuery代码：

//trigger when form is submitted
$("#submit-button").submit(function(e){
    $('#registration').modal('show');
    return false;
});

$('#registration').modal('show');将显示模式，return false;阻止表单发布数据，这将停止页面重新加载。或者，您也可以这样做

$(document).ready(function() {
  $('#submit-button').on('submit', function(e){
      $('#registration').modal('show');
      e.preventDefault();
  });
});

e.preventDefault();将停止页面重新加载。

Answer 2

您可以在验证表单时将其添加到您的函数中：

$('#registration').modal({
        show: 'false',
        backdrop: 'static',
        keyboard: false
    });

键盘错误表示当您按下转义时，模态不会被激活消失了。
将背景设置为静态意味着当用户点击它们时模态之外的鼠标。模态不会结束。

修改

if ($("form button").valid()) { $('#registration').modal({ show: 'false', backdrop: 'static', keyboard: false }); };

Answer 3

您可以在验证成功时添加此内容：

$("#registration").modal('show');

Answer 4

我会使用Ajax解决方案提交表单而不刷新页面。

您甚至可以根据请求的结果更新模式响应。

$("#ajaxform").submit(function(e) {

  var url = "path/to/your/script.php"; // the script where you handle the form input.

  $.ajax({
    type: "POST",
    url: url,
    data: $("#ajaxform").serialize(), // serializes the form's elements.
    success: function(data) 
    {
     //if request successful
     $(".modal-title").text('Request successful');
     $('#registration').modal('show');
    },
    error: function(data) 
    {
      //if request unsuccessful
      $(".modal-title").text('Request failed');
      $('#registration').modal('show');
    }
  }).done(function() {
    //finally, reinitialise modal text back to default 'merci'
    $(".modal-title").text('merci');
  });

  e.preventDefault(); // avoid to execute the actual submit of the form.
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST" class="form-group">
  First Name: <input type="text" name="fname" value="" class="form-control"/> <br/> Last Name: <input type="text" name="lname" value="" class="form-control"/> <br/> Email : <input type="text" name="email" value="" class="form-control"/> <br/>
  <button type="submit" class="btn btn-default">submit</button>
</form>

<div class="modal fade" id="registration" tabindex="1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <h3 class="modal-title">Merci !</h3>
      </div>
    </div>
  </div>
</div>

在提交表单上打开模态引导程序

4 个答案: