JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<link rel="stylesheet" href="http://formvalidation.io/vendor/formvalidation/css/formValidation.min.css">
<script src="http://formvalidation.io/vendor/formvalidation/js/formValidation.min.js"></script>
<script src="http://formvalidation.io/vendor/formvalidation/js/framework/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/1.11.2/jquery-ui.min.css">
<script src="//cdn.jsdelivr.net/jquery.ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.css">
<script src="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.min.js"></script>
<form id="profileForm" class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-3 control-label">Time</label>
        <div class="col-xs-6">
            <input type="text" class="form-control" name="time" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-xs-9 col-xs-offset-3">
            <button type="submit" class="btn btn-default">Validate</button>
        </div>
    </div>
</form>

JavaScript

$('#profileForm')
    .formValidation({
        framework: 'bootstrap',
        icon: {
            valid: 'glyphicon glyphicon-ok',
            invalid: 'glyphicon glyphicon-remove',
            validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            time: {
                validators: {
                    notEmpty: {
                        message: 'The time is required'
                    }
                }
            }
        }
    })
    .find('[name="time"]')
        .timepicker({
            onSelect: function() {
                // We need to revalidate the time field when a date/time is choosen
                $('#profileForm').formValidation('revalidateField', 'time');
            }
        });