Question

目前有很多例子，我无法让它发挥作用。我只是在表单通过简单验证并提交后才尝试加载我的模态。现在它只是在我点击提交时加载模态，即使验证失败也是如此。

例如下面的复选框是必填字段，如果我没有检查它并点击提交验证错误加载，那么模态也是如此。

<span style="display: inline;"  id="download-csv"><input type="submit"   id="csv_download"  value="Download"></span>;



JavaScript :
         var download_csv=document.getElementById("download-csv");
if(count_layer==1)
        download_csv.setAttribute("style","margin-top:10px");
}else{
       download_csv.setAttribute("style","margin-top:20px");

}

<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
        <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>
        <button type="submit" value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
        <input type="submit" value="Submit" />
</form>

我在网上发现了一个使用Jquery的例子，它运行良好，但它没有加载模态。

<div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog">

            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>

        </div>
    </div>

<form method="post" action="" onsubmit="return muModal(this)">

    <input type="checkbox" name="vehicle" value="Accept" required>Accept<br>

    <input type="submit" value="Submit" />
</form>

请注意表单仍然需要提交，我只想在提交过程中弹出模式。

Answer 1

我遇到了同样的问题，这就是我所做的似乎有效的方法。而不是打开模态的“提交”类型的单个按钮，创建两个按钮：

第一个按钮：输入“按钮”，触发表单验证。如果表单已验证，则触发单击第二个按钮

第二个按钮：输入“提交”并隐藏。这是打开模态的按钮。

<form method="post" action="" data-toggle="modal" onsubmit="return myModal(this)">
    <input type="checkbox" name="vehicle" value="Bike" required>I accept this<br>

    <!-- button with onclick event that triggers the form validation. If the form is valid, triggers click of second button -->
    <button type="button" value="buttonValue" class="btn btn-info btn-lg" onclick="if(formIsValid() $('#triggerModal').click();)">button name</button>

    <!-- hidden submit button -->
    <button type="submit" id="triggerModal" hidden value="Submit" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal"></button>  

</form>

Answer 2

我认为这就是我理解的内容吗？

$('#myForm').on('submit', function(e) {
  
  e.preventDefault(); //stop submit
  
  if ($('#myCheck').is(':checked')) {
  //Check if checkbox is checked then show modal
    $('#myModal').modal('show');
  }
});

<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 method="post" action="" data-toggle="modal" id="myForm">
  <input id="myCheck" type="checkbox" name="vehicle" value="Bike" required>I accept this<br>

  <input type="submit" value="Submit" />
</form>


<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

仅在验证检查和表单提交后显示模态

2 个答案: