hi im using bootstrapValidator to validate my form and i have no idea where to add ajax request after validating form. and also want to prevent closing bootstrap modal after submitting the form. i referred similar questions and still couldn't make it work.
here is my bootstrap modal
<a href="#"class="btn btn-lg btn-black ico-windows" data-backdrop="static" data-keyboard="false" data-toggle="modal" data-target="#AddAlbum" > Create New Album </a>
<!-- Modal -->
<div class="modal fade" id="AddAlbum" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Create New Album</h4>
</div>
<div class="modal-body">
<div id="formregister">
<form action="" class="form-horizontal" role="form" id="newAlbum" >
<p class="qc-errmsg" style="display: none;"> </p>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Album Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputEmail3" name="albumName" placeholder="Album Name">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label" >Description</label>
<div class="col-sm-10">
<textarea class="form-control" rows="3" name="description"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" onclick="send()" value="cart" class="btn btn-primary">Save Changes</button>
</div>
</div>
</form>
</div> <!-- form register -->
<div id="successfulpost" style="font: bold 12px Verdana, Arial, Helvetica, sans-serif; color: #ff0000; display: none;">
<p class="jst-txt"><span>Thank you,</span> for showing your Interest !!</p>
<p class="jst-txt">Our property advisor shall get in touch with you very shortly..</p>
</div>
</div> <!-- model body-->
</div>
</div>
</div>
here is my javascript
$(document).ready(function () {
//validations
$('#newAlbum').bootstrapValidator({
// To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
albumName: {
message: 'The Album Name is not valid',
validators: {
notEmpty: {
message: 'The Album Name is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'The Album Name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'The Album Name can only consist of alphabetical and number'
}
},
//form.submit();
}
}
},
submitHandler: function(form) {
$(form).ajaxSubmit({
url: "add_album.php",
type: "POST",
success: function () {
alert('done');
$('#newAlbum').hide();
$('#successfulpost').show();
}
});
});
i made a jsbin for this http://jsbin.com/xatog/8/edit?html,js,output
You are using version 0.5.3. They have removed the submithandler
option and added an event success.form.bv
.
$(form)
.bootstrapValidator(options)
.on('success.form.bv', function(e) {
// Prevent form submission
e.preventDefault();
var $form = $(e.target),
validator = $form.data('bootstrapValidator'),
submitButton = validator.getSubmitButton();
// Do whatever you want here ...
});
source here
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.