JSFiddle - React, Tailwind, and code Playground

by jipexu

HTML

<link rel="stylesheet" href="http://labo.infocapagde.com/lib/bootstrap-4.0.0-alpha/css/bootstrap.css">
<link rel="stylesheet" href="http://labo.infocapagde.com/lib/formvalidation-dist-v0.7.0/dist/css/formValidation.css">
<script src="http://labo.infocapagde.com/lib/bootstrap-4.0.0-alpha/js/bootstrap.js"></script>
<script src="http://labo.infocapagde.com/lib/formvalidation-dist-v0.7.0/dist/js/formValidation.js"></script>
<link rel="stylesheet" href="http://labo.infocapagde.com/lib/font-awesome-4.4.0/css/font-awesome.css">
<script src="http://labo.infocapagde.com/lib/formvalidation-dist-v0.7.0/dist/js/framework/bootstrap.min.js"></script>
<div class="container-fluid">
    <form id="registerForm">
    <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" />
    </div>

    <div class="form-group">
        <label>Email address</label>
        <input type="text" class="form-control" name="email" />
    </div>
</form>
</div>

CSS

/* Custom the feedback icon styles */


#registerForm .form-control-feedback {
    position:relative;
        display: inline-block;
    top:-30px;
    right:5px;
   
}

JavaScript

$(document).ready(function() {
    $('#registerForm')
        .formValidation({
            framework: 'bootstrap',
            icon: {
                valid: 'fa fa-check',
                invalid: 'fa fa-ban fa-lg',
                validating: 'fa fa-refresh fa-lg'
            },
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required and cannot be empty'
                        },
                        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 and underscore'
                        }
                    }
                },
                email: {
                    validators: {
                        notEmpty: {
                            message: 'The email is required and cannot be empty'
                        },
                        emailAddress: {
                            message: 'The input is not a valid email address'
                        }
                    }
                }
            }
        });
});