Adding warning validation state
← Examples
Problem
The form has an input field which is validated remotely using the remote validator to check if it is available or not. Having duplicate values is allowed. In this instance, it's still possible to submit the form. I just want to warn the user by adding the warning class (has-warning) provided by Bootstrap to the form group.
Solution
Assume that the field name is userName and we use the remote validator to check its existence against the database.
In the case it is already taken in the database, we response an JSON encoded string of following object
{
valid: true,
message: 'The user name is already taken'
available: false
}The message property is used to shown in the form.
The available property is a custom property indicating the value is not available. We can reuse it later. Of course, you can change its name to other one to suit with your requirement.
Next, trigger the success.validator.fv and err.validator.fv events to add (remove) has-warning to (from) the form group.
$(form)
.formValidation({
fields: {
userName: {
validators: {
remote: {
url: '/path/to/back-end/'
}
}
}
}
})
// This event will be triggered when the field passes given validator
.on('success.validator.fv', function(e, data) {
// data.field --> The field name
// data.element --> The field element
// data.result --> The result returned by the validator
// data.validator --> The validator name
if (data.field === 'userName'
&& data.validator === 'remote'
&& (data.result.available === false || data.result.available === 'false'))
{
// The userName field passes the remote validator
data.element // Get the field element
.closest('.form-group') // Get the field parent
// Add has-warning class
.removeClass('has-success')
.addClass('has-warning')
// Show message
.find('small[data-fv-validator="remote"][data-fv-for="userName"]')
.show();
}
})
// This event will be triggered when the field doesn't pass given validator
.on('err.validator.fv', function(e, data) {
// We need to remove has-warning class
// when the field doesn't pass any validator
if (data.field === 'userName') {
data.element
.closest('.form-group')
.removeClass('has-warning');
}
});<form id="registerForm" method="post" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Username</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="userName" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registerForm')
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
userName: {
validators: {
notEmpty: {
message: 'The user name is required'
},
remote: {
url: '/examples/adding-warning-validation-state/test.json'
}
}
}
}
})
// This event will be triggered when the field passes given validator
.on('success.validator.fv', function(e, data) {
// data.field --> The field name
// data.element --> The field element
// data.result --> The result returned by the validator
// data.validator --> The validator name
if (data.field === 'userName'
&& data.validator === 'remote'
&& (data.result.available === false || data.result.available === 'false'))
{
// The userName field passes the remote validator
data.element // Get the field element
.closest('.form-group') // Get the field parent
// Add has-warning class
.removeClass('has-success')
.addClass('has-warning')
// Show message
.find('small[data-fv-validator="remote"][data-fv-for="userName"]')
.show();
}
})
// This event will be triggered when the field doesn't pass given validator
.on('err.validator.fv', function(e, data) {
// We need to remove has-warning class
// when the field doesn't pass any validator
if (data.field === 'userName') {
data.element
.closest('.form-group')
.removeClass('has-warning');
}
});
});
</script>