This example demonstrates how to enable/disable validators on the fly.
You might need two things:
In the following form, the new password is not required. Its validators are disabled. When user set the password, the validators will be enabled.
<form id="enableForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-md-3 control-label">Full name (*)</label>
<div class="col-md-5">
<input type="text" class="form-control" name="full_name" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">New password</label>
<div class="col-md-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-md-3 control-label">Confirm password</label>
<div class="col-md-5">
<input type="password" class="form-control" name="confirm_password" />
</div>
</div>
<div class="form-group">
<div class="col-md-5 col-md-offset-3">
<button type="submit" class="btn btn-default">Validate</button>
</div>
</div>
</form>$(document).ready(function() {
$('#enableForm')
.bootstrapValidator({
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
full_name: {
validators: {
notEmpty: {
message: 'The full name is required and cannot be empty'
}
}
},
password: {
enabled: false,
validators: {
notEmpty: {
message: 'The password is required and cannot be empty'
},
identical: {
field: 'confirm_password',
message: 'The password and its confirm must be the same'
}
}
},
confirm_password: {
enabled: false,
validators: {
notEmpty: {
message: 'The confirm password is required and cannot be empty'
},
identical: {
field: 'password',
message: 'The password and its confirm must be the same'
}
}
}
}
})
// Enable the password/confirm password validators if the password is not empty
.on('keyup', '[name="password"]', function() {
var isEmpty = $(this).val() == '';
$('#enableForm')
.bootstrapValidator('enableFieldValidators', 'password', !isEmpty)
.bootstrapValidator('enableFieldValidators', 'confirm_password', !isEmpty);
// Revalidate the field when user start typing in the password field
if ($(this).val().length == 1) {
$('#enableForm').bootstrapValidator('validateField', 'password')
.bootstrapValidator('validateField', 'confirm_password');
}
});
});