JSFiddle - React, Tailwind, and code Playground

by Trevor Hutto

HTML

<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css">
<script src="//cdn.jsdelivr.net/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js"></script>
<form id="test">
    <div class="form-group">
        <input class="form-control input-lg" name="email" type="text" size="35" placeholder="Email*"></input>
    </div>
    <div class="form-group">
        <input class="form-control input-lg" name="password" type="password" size="35" placeholder="Confirm Password*"></input>
    </div>
    <div class="form-group">
        <input class="btn btn-lg btn-success submit-button" style="width: 100%;" value="Sign Up!" type="submit" disabled></input>
    </div>
</form>

CSS

input[type="submit"]:disabled {
    background-color: red;
}

JavaScript

$('#test').bootstrapValidator({
    live: 'enabled',
    feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        email: {
            validators: {
                notEmpty: {
                    message: 'The email address is required.'
                },
                emailAddress: {
                    message: 'The email address is not valid.'
                }
            }
        },
        password: {
            validators: {
                notEmpty: {
                    message: 'The password is required.'
                },
                stringLength: {
                    min: 5,
                    message: 'Your password must be at least 5 characters.'
                }
            }
        }
    }
});

$('form').on('keyup', function () {
    if ($('#test').data('bootstrapValidator').isValid()) {
        $('.submit-button', $(this)).attr('disabled', false);
    } else {
        $('.submit-button', $(this)).attr('disabled', true);
    }
});