Disabling Bootstrap Validator for certain field
Solution 1
Here is a working version:http://jsfiddle.net/silviagreen/ym48cfxd/
$(document).on("click", ".btn-danger", function () {
var bootstrapValidator = $('#multiform').data('bootstrapValidator');
bootstrapValidator.enableFieldValidators('price', false);
});
Have a look at the js fiddle to know which version of jquery, bootstrap and bootstrapValidator I used to make it work.
I know this is an old post but maybe this can be useful to other people.
Solution 2
Try this:
$('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', true);
Working sample below:
$(document).ready(function() {
$('#surveyForm').find('[name="list_type"]')
.change(function(e) {
$('#surveyForm').bootstrapValidator('revalidateField', 'price');
})
.end()
.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
required: 'fa fa-asterisk',
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
price: {
validators: {
notEmpty: {
message: 'The price is required and cannot be empty'
},
integer: {
message: 'You can only enter an integer'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The price can only consist of numbers'
}
}
}
}
});
$(document).on("change", "#inlineCheckbox1", function () {
if($(this).is(":checked")) {
$('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', true);
} else {
$('#surveyForm').bootstrapValidator('enableFieldValidators', 'price', false);
}
});
$("#surveyForm").submit(function(e){
alert("Validation completed");
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/css/bootstrapValidator.css" />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<form id="surveyForm" method="post" class="form-horizontal">
<div class="form-group" id="price_container">
<label class="col-sm-3 control-label" for="price">Asking Price</label>
<div class="col-sm-5">
<input class="form-control" style="width: 50%;" type="text" id="price" name="price" >
</div>
</div>
<div class="form-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1" checked>
<label class="form-check-label" for="inlineCheckbox1">Validate</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</form>
Or see the example in below link: http://bootstrapvalidator.votintsev.ru/examples/enable-validator/
Mobaz
Updated on September 20, 2020Comments
-
Mobaz over 3 years
I'm new to Bootstrap Validator and Jquery generally and am trying to accomplish something.
I have a form with fields e.g.
<div class="form-group" id="price_container"> <label for="price">Asking Price</label><input class="form-control" style="width: 50%;" type="text" id="price" name="price" > </div> <div class="form-group"> <label for="title">Title</label> <input class= "form-control" type="text" name="title"> </div>
and I have it validating ok with:
$('#multiform') .find('[name="list_type"]') .change(function(e) { $('#multiform').bootstrapValidator('revalidateField', 'price'); }) .end() .bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { required: 'fa fa-asterisk', valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { price: { validators: { notEmpty: { message: 'The price is required and cannot be empty' }, integer: { message: 'You can only enter an integer' }, regexp: { regexp: /^[0-9]+$/, message: 'The price can only consist of numbers' } } } } });
However, when a certain action is taking place, I'd like to disable the valiadation (do i can upload images to the server). I've looked at the documentation here: http://bootstrapvalidator.com/examples/enable-validator/
and have got this:
$(document).on("click", ".btn-danger", function () { $('#multiform').bootstrapValidator().enableFieldValidators('price', false); }
but this is simply not working. I know it should be relatively easy, but being a noob I cant work it out.
Can anyone help?
Thanks