JSFiddle - React, Tailwind, and code Playground

by Marko Vasic

HTML

<div class="form-group">
    <label for="txtusername" class="col-sm-4 control-label">Username</label>
    <div class="col-sm-8">
        <input type="text" class="form-control" id="txtusername" name="txtusername" placeholder="Username">
    </div>
</div>
<div class="form-group">
    <label for="txtpassword" class="col-sm-4 control-label">Password</label>
    <div class="col-sm-8">
        <input type="password" class="form-control" id="txtpassword" name="txtpassword" placeholder="Password">
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
        <div class="checkbox">
            <label>
                <input type="checkbox">Remember me</label>
        </div>
    </div>
</div>
<div class="form-group">
    <div class="col-sm-offset-4 col-sm-8">
        <button type="submit" id="signin" class="btn btn-default">Sign in</button>
    </div>

JavaScript

var $input = $('input'),
    $register = $('#signin');
$register.attr('disabled', true);
$input.keyup(function () {
    var trigger = false;
    $input.each(function () {
        if (!$(this).val()) {
            trigger = true;
        }
    });
    trigger ? $register.attr('disabled', true) : $register.removeAttr('disabled');
});
$('.form-group').on('change', function () {
    var usr_name = $('txtusername').val().length;
    var usr_pass = $('txtpassword').val().length;
    if (usr_name < 1 || usr_pass < 1) {
        $register.attr('disabled', true);
    }
});