我正在使用使用jQuery formvalidation的引导程序启动盒模件表单。我需要将提交按钮放入 MODAL-FOOTER 中，并且在提交时应通过FormValidation插件进行验证并进行AJAX提交。
下面是我的代码，当按下按钮 submit1 它根据需要正常工作，但是该按钮在模态内部。当我使用 submit2 按钮提交表单时，它在模态脚上，它在不做任何事情的情况下关闭模态。
submit1 按钮需要在模态 - 脚内或 submit2 按钮进行验证。需要您的帮助。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="../library/bootstrap/css/bootstrap.min.css"/>
</head>
<body>
<button id="btnClick">Click Me</button>
<!-- reservation Dialog -->
<form id="reservation" method="post" class="form-horizontal" style="display:none;">
<div class="form-group">
<label class="col-xs-3 control-label">Title</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="title" name="title"/>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Name</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="name" name="name"/>
</div>
</div>
<div class="form-group">
<button id="Submit1" type="submit" class="btn btn-info">Submit1</button>
</div>
</form>
<script src="../library/jquery/jquery-2.1.4.min.js"></script>
<script src="../library/bootstrap/js/bootstrap.min.js"></script>
<script src="../library/formvalidation/formValidation.min.js"></script>
<script src="../library/formvalidation/formValidation.bootstrap.min.js"></script>
<script src="../library/bootBox/bootbox.min.js"></script>
<script >
$(document).ready(function(){
var reservation = $('#reservation');
$('#btnClick').on('click',function(){
bootbox.dialog({
title: 'Edit Reservation',
message: reservation,
size: 'large',
show: false,
buttons: {
Submit2: {
label: "Submit2",
className: "btn-success",
callback: function(e) {
e.preventDefault();
console.log('Submit Clicked');
}
}
}
}).on('shown.bs.modal',function () {
reservation
.show() // Show the login form
.formValidation('resetForm', true); // Reset form
}).on('hide.bs.modal',function (e) {
reservation.hide().appendTo('body');
}).modal('show').find("div.modal-dialog").css('width','900px');
reservation.show();
});
reservation.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
title: {
validators: {
notEmpty: {
message: 'The title is required'
}
}
}, name: {
validators: {
notEmpty: {
message: 'Please select type'
}
}
}
}
}).on('success.form.fv', function (e) {
e.preventDefault(); // Prevent form submission
var $form = $(e.target);
// Use Ajax to submit form data
console.log("ajax submit");
});
});
</script>
</body>
</html>
找到了问题的解决方案，在 sumbit1 button中提交后返回false， button callback ，以防止形式关闭。
$('#btnClick').on('click',function(){
bootbox.dialog({
title: 'Edit Reservation',
message: reservation,
size: 'large',
show: false,
buttons: {
Submit2: {
label: "Submit2",
className: "btn-success",
callback: function(e) {
reservation.submit();
return false;
}
}
}
.....