Is there a way to dynamically disable a specific validator for a field, but still want other validations applied for same field.
Sample code:
$(document).ready(function() {
$('#registrationForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
fname: {
validators: {
notEmpty: {
message: 'First name is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'First name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'First name can only consist of alphabetical and digits'
}
}
},
lname: {
validators: {
notEmpty: {
message: 'Last name is required and cannot be empty'
},
stringLength: {
min: 6,
max: 30,
message: 'Last name must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9]+$/,
message: 'Last name can only consist of alphabetical and digits'
}
}
}
}
})
.on('error.validator.bv', function(e, data) {
data.element
.data('bv.messages')
.find('.help-block[data-bv-for="' + data.field + '"]').hide()
.filter('[data-bv-validator="' + data.validator + '"]').show();
});
});
$(document).on("change keyup paste", "#fName", function () {
if($('#fname').val()==="") { $('#registrationForm').bootstrapValidator('enableFieldValidators', 'lname', true);
} else {
$('#registrationForm').bootstrapValidator('enableFieldValidators', 'lname', false);
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://oss.maxcdn.com/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
</head>
<body>
<form id="registrationForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-sm-3 control-label">First Name</label>
<div class="col-sm-4">
<input type="text" autocomplete="off" class="form-control" name="fname" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-4">
<input type="text" autocomplete="off" class="form-control" name="lname" />
</div>
</div>
<div class="form-group">
<div class="col-sm-5 col-sm-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>
</body>
</html>
In this example, I want to dynamically disable validation for notEmpty
but still want to see validation message for stringLength
I've tried below code, but without any luck
$('#registrationForm').bootstrapValidator('enableFieldValidators', 'username', 'notEmpty', false);
--- Update ---
Updated the example to make it simple.
I've first name and last name fields. If first name is entered then last name is not mandatory. Which means I don't need validation message for notEmpty
. But if user decides to enter a value for last name, then it should meet other remaining validations stringLength
and regexp
.
You messed up parameters orders. According to source code it should be: field
, enabled
, validatorName
:
$('#registrationForm').bootstrapValidator('enableFieldValidators',
'username', false, 'notEmpty');
I've tested in your snippet and it works.