Bootstrap JS validator and form submit
I'm using this Bootstrap validator github.com/1000hz/bootstrap-validator for my loading forms, but there doesn't seem to be a way to set any external JS condition before submitting forms.
For example, I would like to do the following from external JS files:
1 # if the form or any form input is invalid using validator () then I do some action.
2 # else Users will see the boot button loading message until everything is uploaded to the databases.
There might be one case here:
$('button[data-loading-text]').click(function () {
var btn = $(this);
btn.button('loading');
$.blockUI();
// #1 if form is invalid using validator() then I unblock the please wait message $.unblockUI(); and reset the bootstrap loading button.
// #2 else users will still see the "please wait" message + bootsrap loading button untill everything is submitted into the databases.
});
http://jsfiddle.net/temgo/k07nx06k/12/
Any help would be appreciated as it seems like plugin events are only being set for a specific field and not for full form validation.
Hello
source to share
Check out the Events section on the 1000hz page. ( http://1000hz.github.io/bootstrap-validator/#validator-events )
If you want to trigger an action before validation, just listen for the event.
$('#someFormId').on('validate.bs.validator', function(){
doSomeStuff();
});
Edit
The problem with events is that it fires after every field. From what I know, this plugin does not provide an event for validation success.
source to share
For ref hope this helps u
$(document).ready(function () {
$('#contact-form').validate({
rules: {
name: {
minlength: 2,
required: true
},
email: {
required: true,
email: true
},
message: {
minlength: 2,
required: true
}
},
highlight: function (element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
success: function (element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('Done');
}
});
});
source to share
I came across this question while looking for something else, but I was working on what you are trying to achieve.
My solution was to use the code snippet that the plugin author gives to bind to the submit button
$('#form').validator().on('submit', function (e) {
if ( !e.isDefaultPrevented() ) {
// put your conditional handling here. return true if you want to submit
// return false if you do not want the form to submit
}
});
Hope someone can help.
source to share
I work so hard for better coding with this form validation module.
Follow my code and try it yourself:
// Select every button with type submit under a form with data-toggle validator
$('form[data-toggle="validator"] button[type="submit"]').click(function(e) {
// Select the form that has this button
var form = $(this).closest('form');
// Verify if the form is validated
if (!form.data("bs.validator").validate().hasErrors()) {
e.preventDefault();
// Here go the trick! Fire a custom event to the form
form.trigger('submitted');
} else {
console.log('Form still not valid');
}
});
// And in your separated script, do the following:
$('#contactForm').on('submitted', function() {
// do anything here...
})
Consider the following HTML code:
<form id="contactForm" action="/contact/send" method="POST" data-toggle="validator" role="form">
<div class="form-group has-feedback">
<label for="inputName" class="control-label">Name:</label>
<input type="text" name="inputName" id="inputName" class="form-control" data-error="Your input has an invalid value"/>
<span class="help-block with-errors"></span>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Send</button>
</div>
</form>
source to share