Enable submit button in Bootstrap validator
10,242
Solution 1
You need to disable the submit button .on('error.field.bv')
and enable it back on .on('status.field.bv')
.
And you should be using data.bv.disableSubmitButtons()
method!
Can you try this?
$(document).ready(function() {
$('#ans_frm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
submitButtons: 'button[type="submit"]',
fields: {
ans: {
group: '.col-md-8',
validators: {
stringLength: {
min: 3,
max: 100,
message: 'The answer must be more than 2 and less than 100 characters long'
},
notEmpty: {
message: 'The answer must not be empty'
}
}
}
}
}).on('error.field.bv', function(e, data) {
data.bv.disableSubmitButtons(true); // disable submit buttons on errors
}
}).on('status.field.bv', function(e, data) {
data.bv.disableSubmitButtons(false); // enable submit buttons on valid
}
});
});
Solution 2
Use this
$('#ans_frm').bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
live: 'enabled',
trigger: null
}).on('success.form.bv', function (e) {
// Prevent submit form
// e.preventDefault();
})
.on('error.form.bv', function () {
});
Author by
Umerm
Updated on June 14, 2022Comments
-
Umerm about 2 years
I am using Bootstrap validator and the problem I am having is that I want to enable to submit button after all values are valid but unable to do so.
$(document).ready(function() { $('#ans_frm').bootstrapValidator({ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, submitButtons: 'button[type="submit"]', fields: { ans: { group: '.col-md-8', validators: { stringLength: { min: 3, max: 100, message: 'The answer must be more than 2 and less than 100 characters long' }, notEmpty: { message: 'The answer must not be empty' } } } } }).on('status.field.bv', function(e, data) { disableSubmitButtons(false); } }); });
-
Umerm over 9 yearsIts does send values to the next page but it does not validate.The button is enabled all the time even when the values are not right.