JSFiddle - React, Tailwind, and code Playground

by alachgar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.13.1/jquery.validate.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<form id="auth-sign-up" enctype="application/x-www-form-urlencoded" class="block-form block-form-default" action="http://online-racing.net/auth/sign-up" method="post">
    <div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <div class="form-group">
                <label for="FirstName" class="control-label required">Name</label>
                <input type="text" name="FirstName" id="FirstName" value="" maxLength="255" class="form-control" placeholder="Name" />
            </div>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
            <div class="form-group">
                <label for="LastName" class="control-label required">Surname</label>
                <input type="text" name="LastName" id="LastName" value="" maxLength="255" class="form-control" placeholder="Surname" />
            </div>
        </div>
    </div>
    <div>
       
        <div class="form-group">
            <label for="NickName" class="control-label required">NickName</label>
            <input type="text" name="NickName" id="NickName" value="" maxLength="255" class="form-control" placeholder="NickName" />
        </div>
        <div class="form-group">
            <label for="Email" class="control-label required">E-mail</label>
            <input type="text" name="Email" id="Email" value="" maxLength="255" class="form-control" placeholder="E-mail" data-title="Enter your email. Example: [email protected]."...

JavaScript

(function ($) {
    $(document).ready(function () {
        jQuery.validator.setDefaults({
            highlight: function (element, errorClass, validClass) {
                if (element.type === "radio") {
                    this.findByName(element.name).addClass(errorClass).removeClass(validClass);
                } else {
                    $(element).closest('.form-group').removeClass('has-success has-feedback').addClass('has-error has-feedback');
                    $(element).closest('.form-group').find('i.fa').remove();
                    $(element).closest('.form-group').append('<i class="fa fa-exclamation fa-lg form-control-feedback"></i>');
                }
            },
            unhighlight: function (element, errorClass, validClass) {
                if (element.type === "radio") {
                    this.findByName(element.name).removeClass(errorClass).addClass(validClass);
                } else {
                    $(element).closest('.form-group').removeClass('has-error has-feedback').addClass('has-success has-feedback');
                    $(element).closest('.form-group').find('i.fa').remove();
                    $(element).closest('.form-group').append('<i class="fa fa-check fa-lg form-control-feedback"></i>');
                }
            }
        });

        $("form").validate({
            rules: {
                'NickName': {
                    required: true,
                    minlength: 5,
                    maxlength: 20
                },
                    'Email': {
                    required: true,
                    email: true,
                    minlength: 5,
                    maxlength: 100
                },
                    'Password': {
                    required: true,
                    minlength: 6,
                    maxlength: 25
                },
                    'RepeatPassword': {
                    required: true,
                    minlength: 5,
                    maxlength:...