我正在研究使用 jquery formvalidation 的引导引导框模式表单。我需要将提交按钮放在modal-footer 中，提交时应该通过 formvalidation 插件进行验证并进行 Ajax 提交。
下面是我的代码，当按下按钮submit1时，它可以按我的需要正常工作，但按钮在模态体内。当我使用模式页脚上的submit2按钮提交表单时，它关闭模式而不做任何事情。
Submit1按钮需要在 modal-footer 或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>