Using Balloon CSS library to show message
← Examples
In this example, you will see how to use the Balloon CSS library to display the messages.
Balloon CSS is a popular library for creating a tooltip with just pure CSS. It's an open source library and available on Github.
To see how we implement this example behind the scenes, please look at the Using hint library example.
<link href="/vendor/balloon/balloon.min.css" rel="stylesheet" />
<style>
.form-control-feedback {
pointer-events: auto;
}
</style>
<form id="registrationForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Full name</label>
<div class="col-xs-4">
<input type="text" class="form-control" name="firstName" placeholder="First name" />
</div>
<div class="col-xs-4">
<input type="text" class="form-control" name="lastName" placeholder="Last name" />
</div>
</div>
<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">
<label class="col-xs-3 control-label">Email address</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="email" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Password</label>
<div class="col-xs-5">
<input type="password" class="form-control" name="password" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Gender</label>
<div class="col-xs-5">
<div class="radio">
<label>
<input type="radio" name="gender" value="male" /> Male
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="female" /> Female
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="gender" value="other" /> Other
</label>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Date of birth</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="birthday" placeholder="YYYY/MM/DD" />
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-primary" name="signup" value="Sign up">Submit</button>
</div>
</div>
</form>
<script>
$(document).ready(function() {
$('#registrationForm')
.on('init.field.fv', function(e, data) {
data.element
.data('fv.icon')
.wrap($('<span/>'))
.parent()
.wrap($('<span/>').addClass('form-control-feedback'));
})
.formValidation({
framework: 'bootstrap',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
firstName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The first name is required'
}
}
},
lastName: {
row: '.col-xs-4',
validators: {
notEmpty: {
message: 'The last name is required'
}
}
},
username: {
validators: {
notEmpty: {
message: 'The username is required'
},
stringLength: {
min: 6,
max: 30,
message: 'The username must be more than 6 and less than 30 characters long'
},
regexp: {
regexp: /^[a-zA-Z0-9_\.]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
password: {
validators: {
notEmpty: {
message: 'The password is required'
},
different: {
field: 'username',
message: 'The password cannot be the same as username'
}
}
},
gender: {
validators: {
notEmpty: {
message: 'The gender is required'
}
}
},
birthday: {
validators: {
notEmpty: {
message: 'The date of birth is required'
},
date: {
format: 'YYYY/MM/DD',
message: 'The date of birth is not valid'
}
}
}
}
})
.on('err.field.fv', function(e, data) {
var $field = data.element,
$icon = $field.data('fv.icon'),
$messages = $field.data('fv.messages').find('.help-block[data-fv-for="' + data.field + '"]');
// Get a random message
var message = $messages.filter('[data-fv-result="INVALID"]').eq(0).html();
$icon.removeClass()
.addClass('glyphicon glyphicon-remove')
.parent()
.attr('data-balloon-pos', 'down')
.attr('data-balloon', message);
// Hide all error messages
$messages.hide();
})
.on('success.field.fv', function(e, data) {
data.element
.data('fv.icon')
.removeClass()
.addClass('glyphicon glyphicon-ok')
.parent()
.removeAttr('data-balloon-pos')
.removeAttr('data-balloon');
});
});
</script>