JSFiddle - React, Tailwind, and code Playground

by alachgar

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>
    <input class="btn btn-lg btn-success submit-button" style="width: 100%;" value="Sign Up!" type="submit" disabled></input>
</form>

CSS

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

JavaScript

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


    $('#test').on('status.field.bv', function(e, data) {
        formIsValid = true;
        $('.form-group',$(this)).each( function() {
            formIsValid = formIsValid && $(this).hasClass('has-success');
        });
        
        if(formIsValid) {
            $('.submit-button', $(this)).attr('disabled', false);
        } else {
            $('.submit-button', $(this)).attr('disabled', true);
        }
    });