JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.0/jquery.validate.js"></script>
<div class="container">
    <div class="row" id="pwd-container">
        <div id="messages"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4">
            <section class="myform">
                <form method="post" role="form" id="signup-form">
                    <h1>Registration</h1>
                    <div class="form-group has-feedback">
                        <input type="text" name="username" id="username" class="form-control input-lg" placeholder="Username" />
                        <span class="glyphicon form-control-feedback" id="username1"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="email" name="email" placeholder="Email" class="form-control input-lg" id="email" />
                        <span class="glyphicon form-control-feedback" id="email1"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password" />
                        <span class="glyphicon form-control-feedback" id="password1"></span>
                    </div>
                    <div class="form-group has-feedback">
                        <input type="password" class="form-control input-lg" name="password_confirm" id="password_confirm" placeholder="Confirm password" />
                        <span class="glyphicon form-control-feedback" id="password_confirm1"></span>
                    </div>
                    <button type="submit" class="btn btn-lg btn-primary btn-block" name="btn-signup" id="btn-signup">Sign up</button>
                    <span>Already have an account? <a href="index.php">Go back</a></span>
                </form>
            </section>
        </div>
    </div>
</div>

JavaScript

$('document').ready(function() {
    $('#signup-form').validate({
        rules: {
            username: {
                minlength: 3,
                required: true
            },
            password: {
                minlength: 3,
                required: true
            },
            email: {
                required: true,
                email: true
            },
            password_confirm: {
                required: true,
                equalTo: password,
            },
        },
        messages: {
            password: {
                required: "Please enter your password",
                minlength: "Password must be 3 characters long"
            },
            password_confirm: {
                required: "Please confirm your password",
                equalTo: "Password does not match",
            },
            username: {
                required: "Please enter your username",
                minlength: "Username must be 3 characters long"
            },
            email: {
                required: "Please enter your email",
                email: "Please enter a valid email"
            },
        },
        highlight: function(element) {
            var id_attr = "#" + $(element).attr("id") + "1";
            $(element).closest('.form-group').removeClass('has-success').addClass('has-error');
            $(id_attr).removeClass('glyphicon-ok').addClass('glyphicon-remove');
        },
        unhighlight: function(element) {
            var id_attr = "#" + $(element).attr("id") + "1";
            $(element).closest('.form-group').removeClass('has-error').addClass('has-success');
            $(id_attr).removeClass('glyphicon-remove').addClass('glyphicon-ok');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if (element.length) {
                error.insertAfter(element);
                element.css('margin-bottom', '5px');
            } else {
 ...