JSFiddle - React, Tailwind, and code Playground

by James Bekis

HTML

<form id="authLogin" name="authLogin" method="post" action="/auth/dologin">
    <fieldset id="formFieldset">
        <p class="formField contentTextIcons">
            <label for="username">User name:</label>
            <input type="text" id="username" name="username" placeholder="User name" />
        </p>
        <p class="formField contentTextIcons">
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" placeholder="Password" />
        </p>
    </fieldset>
    <div class="loginBtns clearfix">
        <p class="loginBtn">
            <button id="authSubmit" class="">Sign In</button>
        </p>
    </div>
</form>

JavaScript

var submitBtn = $('#authSubmit');
if($('#username').val() == '' && $('#password').val() == ''){
    submitBtn.attr('disabled', 'disabled');
    submitBtn.addClass('customDisabledBtn');
}
$('#username').bind('keyup click mousedown paste change input',function(){
        if ($('#username').val() != '' && $('#password').val() != '') {
            submitBtn.removeAttr('disabled');
            submitBtn.removeClass('customDisabledBtn');
            submitBtn.addClass('customButton');
        } else if($('#email').get(0)) {
            if($('#username').val() != '' || $('#email').val() !== '') {
                submitBtn.removeAttr('disabled');
                submitBtn.removeClass('customDisabledBtn');
                submitBtn.addClass('customButton');
            }
        } else {
            submitBtn.attr('disabled', 'disabled');
            submitBtn.addClass('customDisabledBtn');
        };
    });
$('#password').bind('keyup click mousedown paste change input',function(){
    if ($('#username').val() != '' && $('#password').val() != '') {
        console.log($('#password').val());
        submitBtn.removeAttr('disabled');
        submitBtn.removeClass('customDisabledBtn');
        submitBtn.addClass('customButton');
    } else {
        submitBtn.attr('disabled', 'disabled');
        submitBtn.addClass('customDisabledBtn');
    };
});