[英]Only show modal after validation check and form has been submitted
There are quite a few examples out there at the moment and i have not been able to get this to work. 目前有很多例子,我无法让它发挥作用。 I am trying to load my modal only once my form has passed simple validation and has been submitted. 我只是在表单通过简单验证并提交后才尝试加载我的模态。 Right now it just loads the modal when i click submit, even if it fails validation. 现在它只是在我点击提交时加载模态,即使它未通过验证。
For example below, the checkbox is a required field, if i don't check it and click submit the validation error loads, but so does the modal. 例如下面,复选框是必填字段,如果我不检查它并单击提交验证错误加载,但模态也是如此。
<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>
<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">×</button>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I found an example online that uses Jquery and it works well, but it does not load a modal. 我在网上找到了一个使用Jquery的例子,它运行良好,但它没有加载模态。
<form method="post" action="" onsubmit="return muModal(this)">
<input type="checkbox" name="vehicle" value="Accept" required>Accept<br>
<input type="submit" value="Submit" />
</form>
<script>
function muModal(f)
{
var form=f,
modal=$('<div/>', {
'id':'alert',
'html':'<iframe src="http://test.com/preloader"></iframe>'
})
.dialog({
'modal':true,
'width':800,
'height':'auto',
'buttons': {
'OK': function() {
$(this).dialog( "close" );
// do something, maybe call form.submit();
}
}
});
return false;
}
</script>
Please note that the form still needs to submit, i just want the modal to pop up while the submission is happening. 请注意,表单仍然需要提交,我只想在提交发生时弹出模式。
I had the same problem and here is what I did which seems to work. 我有同样的问题,这是我做的似乎工作。 Instead of a single button of type "submit" that opens the modal, create two buttons: 而不是打开模态的“提交”类型的单个按钮,创建两个按钮:
1st button : type "button", triggers the form validation. 第一个按钮 :输入“按钮”,触发表单验证。 If the form is validated, triggers the click of the 2nd button 如果表单已验证,则触发单击第二个按钮
2nd button : type "submit" and hidden. 第二个按钮 :输入“提交”并隐藏。 This is the button that will open the modal. 这是打开模态的按钮。
<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>
I think this is what you want as I understand it? 我认为这是你想要的,因为我理解它?
$('#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">×</button> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.