Playing with Fuel UX
← Examples
Fuel UX extends Bootstrap with some useful Javascript controls.
In this example, you will see an usage of integrating FormValidation with a few of Fuel UX controls such as Datepicker, Pillbox, Radio, Selectlist.
You should look at the basic principles when integrating FormValidation with other plugins
Because some of these Fuel UX controls have complex markup, it's not easy for us to adjust the feedback icons.
The trick here is that trigger the init.field.fv event and move the icon to desired position:
$('#albumForm')
// IMPORTANT: on('init.field.fv') must be declared
// before calling .formValidation(...)
.on('init.field.fv', function(e, data) {
var $field = data.element, // Field element
$icon = $field.data('fv.icon'), // Icon element
$messages = $field.data('fv.messages'); // Message container
$icon.appendTo($messages);
})
.formValidation(...);You can see how this trick is used in the Showing icons in custom area example.
We also provide an example showing how to play with Fuel UX Wizard, just in case you need it
<!-- Include Fuel UX files -->
<link rel="stylesheet" href="//www.fuelcdn.com/fuelux/3.6.4/css/fuelux.min.css">
<script src="//www.fuelcdn.com/fuelux/3.6.4/js/fuelux.min.js"></script>
<div class="fuelux">
<form id="albumForm" class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Album name</label>
<div class="col-xs-5">
<input type="text" class="form-control" name="name" />
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Artist(s)</label>
<div class="col-xs-7">
<div class="pillbox" id="artistsPillbox">
<ul class="clearfix pill-group">
<li class="pillbox-input-wrap btn-group">
<input type="text" class="form-control dropdown-toggle pillbox-add-item" />
<button type="button" class="dropdown-toggle sr-only">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="suggest dropdown-menu" role="menu" data-toggle="dropdown" data-flip="auto"></ul>
</li>
</ul>
</div>
<input type="hidden" name="artists" />
<small class="help-block">Separate artists by a comma</small>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Genre</label>
<div class="col-xs-4">
<div class="btn-group selectlist" data-resize="auto" id="genreList">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<span class="selected-label"></span>
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li data-value=""><a href="#">Select a genre</a></li>
<li data-value="country"><a href="#">Country</a></li>
<li data-value="folk"><a href="#">Folk</a></li>
<li data-value="hiphop"><a href="#">Hip Hop</a></li>
<li data-value="jazz"><a href="#">Jazz</a></li>
<li data-value="pop"><a href="#">Pop</a></li>
<li data-value="rnb"><a href="#">R&B</a></li>
<li data-value="rock"><a href="#">Rock</a></li>
</ul>
<input class="hidden hidden-field" name="genre" readonly="readonly" aria-hidden="true" type="text" />
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Release date</label>
<div class="col-xs-5">
<div style="width: 180px;">
<div class="datepicker" id="releasedDatePicker">
<div class="input-group">
<input class="form-control" name="releasedDate" type="text" />
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="glyphicon glyphicon-calendar"></span>
<span class="sr-only">Toggle Calendar</span>
</button>
<div class="dropdown-menu dropdown-menu-right datepicker-calendar-wrapper" role="menu">
<div class="datepicker-calendar">
<div class="datepicker-calendar-header">
<button type="button" class="prev"><span class="glyphicon glyphicon-chevron-left"></span><span class="sr-only">Previous Month</span></button>
<button type="button" class="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next Month</span></button>
<button type="button" class="title" data-month="2" data-year="2015">
<span class="month">
<span data-month="0">January</span>
<span data-month="1">February</span>
<span data-month="2" class="current">March</span>
<span data-month="3">April</span>
<span data-month="4">May</span>
<span data-month="5">June</span>
<span data-month="6">July</span>
<span data-month="7">August</span>
<span data-month="8">September</span>
<span data-month="9">October</span>
<span data-month="10">November</span>
<span data-month="11">December</span>
</span>
<span class="year">2015</span>
</button>
</div>
<table class="datepicker-calendar-days">
<thead>
<tr>
<th>Su</th>
<th>Mo</th>
<th>Tu</th>
<th>We</th>
<th>Th</th>
<th>Fr</th>
<th>Sa</th>
</tr>
</thead>
<tbody><tr><td data-date="1" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">1</b></span></td><td data-date="2" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">2</b></span></td><td data-date="3" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">3</b></span></td><td data-date="4" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">4</b></span></td><td data-date="5" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">5</b></span></td><td data-date="6" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">6</b></span></td><td data-date="7" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">7</b></span></td></tr><tr><td data-date="8" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">8</b></span></td><td data-date="9" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">9</b></span></td><td data-date="10" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">10</b></span></td><td data-date="11" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">11</b></span></td><td data-date="12" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">12</b></span></td><td data-date="13" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">13</b></span></td><td data-date="14" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">14</b></span></td></tr><tr><td data-date="15" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">15</b></span></td><td data-date="16" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">16</b></span></td><td data-date="17" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">17</b></span></td><td data-date="18" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">18</b></span></td><td data-date="19" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">19</b></span></td><td data-date="20" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">20</b></span></td><td data-date="21" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">21</b></span></td></tr><tr><td data-date="22" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">22</b></span></td><td data-date="23" data-month="2" data-year="2015" class="past restricted" title="Restricted"><span><b class="datepicker-date">23</b></span></td><td data-date="24" data-month="2" data-year="2015" class="current-day selected"><span><button type="button" class="datepicker-date">24</button></span></td><td data-date="25" data-month="2" data-year="2015"><span><button type="button" class="datepicker-date">25</button></span></td><td data-date="26" data-month="2" data-year="2015"><span><button type="button" class="datepicker-date">26</button></span></td><td data-date="27" data-month="2" data-year="2015"><span><button type="button" class="datepicker-date">27</button></span></td><td data-date="28" data-month="2" data-year="2015"><span><button type="button" class="datepicker-date">28</button></span></td></tr><tr><td data-date="29" data-month="2" data-year="2015"><span><button type="button" class="datepicker-date">29</button></span></td><td data-date="30" data-month="2" data-year="2015"><span><button type="button" class="datepicker-date">30</button></span></td><td data-date="31" data-month="2" data-year="2015"><span><button type="button" class="datepicker-date">31</button></span></td><td class="next-month" data-date="1" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">1</button></span></td><td class="next-month" data-date="2" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">2</button></span></td><td class="next-month" data-date="3" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">3</button></span></td><td class="next-month" data-date="4" data-month="3" data-year="2015"><span><button type="button" class="datepicker-date">4</button></span></td></tr></tbody>
</table>
<div class="datepicker-calendar-footer">
<button type="button" class="datepicker-today">Today</button>
</div>
</div>
<div class="datepicker-wheels" aria-hidden="true">
<div class="datepicker-wheels-month">
<h2 class="header">Month</h2>
<ul>
<li data-month="0"><button type="button">Jan</button></li>
<li data-month="1"><button type="button">Feb</button></li>
<li data-month="2"><button type="button">Mar</button></li>
<li data-month="3"><button type="button">Apr</button></li>
<li data-month="4"><button type="button">May</button></li>
<li data-month="5"><button type="button">Jun</button></li>
<li data-month="6"><button type="button">Jul</button></li>
<li data-month="7"><button type="button">Aug</button></li>
<li data-month="8"><button type="button">Sep</button></li>
<li data-month="9"><button type="button">Oct</button></li>
<li data-month="10"><button type="button">Nov</button></li>
<li data-month="11"><button type="button">Dec</button></li>
</ul>
</div>
<div class="datepicker-wheels-year">
<h2 class="header">Year</h2>
<ul></ul>
</div>
<div class="datepicker-wheels-footer clearfix">
<button type="button" class="btn datepicker-wheels-back"><span class="glyphicon glyphicon-arrow-left"></span><span class="sr-only">Return to Calendar</span></button>
<button type="button" class="btn datepicker-wheels-select">Select <span class="sr-only">Month and Year</span></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Review</label>
<div class="col-xs-7">
<textarea name="review" class="form-control" rows="10"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-xs-3 control-label">Rating</label>
<div class="col-xs-4">
<div class="radio ratingRadio">
<label class="radio-custom">
<input class="sr-only" name="rating" type="radio" value="awesome" /> Awesome
</label>
</div>
<div class="radio ratingRadio">
<label class="radio-custom">
<input class="sr-only" name="rating" type="radio" value="ok" /> OK
</label>
</div>
<div class="radio ratingRadio">
<label class="radio-custom">
<input class="sr-only" name="rating" type="radio" value="suck" /> Sucks
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-9 col-xs-offset-3">
<button type="submit" class="btn btn-default">Add new album</button>
</div>
</div>
</form>
</div>
<script>
$(document).ready(function() {
$('#albumForm')
.on('init.field.fv', function(e, data) {
var $field = data.element,
$icon = $field.data('fv.icon'),
$messages = $field.data('fv.messages');
$icon.appendTo($messages);
})
.formValidation({
framework: 'bootstrap',
excluded: ':disabled',
icon: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
name: {
validators: {
notEmpty: {
message: 'The name is required'
}
}
},
artists: {
validators: {
notEmpty: {
message: 'The artist(s) is required'
}
}
},
genre: {
validators: {
notEmpty: {
message: 'The genre is required'
}
}
},
releasedDate: {
validators: {
notEmpty: {
message: 'The release date is required'
},
date: {
format: 'MM/DD/YYYY',
message: 'The release date is not valid'
}
}
},
rating: {
validators: {
notEmpty: {
message: 'The rating is required'
}
}
}
}
});
// Using Pillbox
$('#artistsPillbox')
.pillbox({ edit: true })
.on('added.fu.pillbox removed.fu.pillbox', function(e, item) {
var items = $('#artistsPillbox').pillbox('items'),
artists = [];
$.each(items, function(k, v) {
artists.push(v.text);
});
$('#albumForm')
.find('[name="artists"]')
.val(artists.join(','))
.end()
.formValidation('revalidateField', 'artists');
});
// Selectlist
$('#genreList')
.selectlist()
.on('changed.fu.selectlist', function() {
$('#albumForm').formValidation('revalidateField', 'genre');
});
// Datepicker
$('#releasedDatePicker')
.datepicker({
allowPastDates: true
})
.on('changed.fu.datepicker', function(e, date) {
$('#albumForm').formValidation('revalidateField', 'releasedDate');
});
// Radio
$('.ratingRadio').radio();
});
</script>