Bootstrap Validator - Alert on success validation
I'm using Bootstrap Validator plugin to validate my form and I'm trying to do an alert when the form is successfully validated.
HTML
<form id="defaultForm" role="form">
<div class="form-group">
<label for="eventName">Event Name</label>
<input type="text" class="input-sm form-control" id="eventName" name="name" placeholder="...">
</div>
<button class="btn btn-sm">Add</button>
</form>
JS
$('#defaultForm').bootstrapValidator({
live: 'enabled',
fields: {
name: {
validators: {
notEmpty: {
message: 'The Evenr Name is required and cannot be empty',
onSuccess: function(e, data) {
alert('Success');
}
},
}
}
}
});
I've tried this according to this https://github.com/nghuuphuoc/bootstrapvalidator/issues/195
My form is validating but its not alerting the message on success. How can I alert it properly?
Answer
<!DOCTYPE html>
<html>
<head>
<title>BootstrapValidator demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/vendor/bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/vendor/jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/nghuuphuoc/bootstrapvalidator/v0.5.0/dist/js/bootstrapValidator.js"></script>
</head>
<body>
<form id="defaultForm" method="post" role="form">
<div class="form-group">
<label for="eventName">Event Name</label>
<input type="text" class="input-sm form-control" id="eventName" name="name[]" placeholder="...">
</div>
<button type="button" class="btn btn-default btn-sm addButton" data-template="textbox">Add</button>
<div class="form-group">
<div class="col-lg-offset-3 col-lg-3">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function() {
$('#defaultForm')
.bootstrapValidator({
live: 'enabled',
fields: {
'name[]': {
validators: {
notEmpty: {
message: 'The textbox field is required'
}
}
}
},
onSuccess: function(e, data) {
//this section before submit
alert('Success');
}
});
});
</script>
</body>
</html>