JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<div class="form-group" id="password">
    <input type="password" class="form-control" placeholder="Password" name="password">
</div>
<div class="form-group" id="repassword">
    <input type="password" class="form-control" placeholder="Confirm Password" name="repassword">
</div>

CSS

.has-success {
    background:green;
}
.has-error {
    background:red;
}

JavaScript

//Check if password is set
    $('input[name=password]').blur(function () {
        if ($(this).val().length == 0) {
            $('#password').addClass('has-error');
        } else {
            $('#password').addClass('has-success');
        }
    });
    //Check if repassword is set
    $('input[name=repassword]').blur(function () {
        if ($(this).val().length == 0) {
            $('#repassword').addClass('has-error');
        } else {
            $('#repassword').addClass('has-success');
        }
    });
    //Check if password and repassword are equal
    $('input').blur(function () {
        if ($('input[name=password]').val() != $('input[name=repassword]').val()) {
            $('#password').removeClass().addClass('has-error');
            $('#repassword').removeClass().addClass('has-error');
        } else {
            $('#password').removeClass().addClass('has-success');
            $('#repassword').removeClass().addClass('has-success');
        }
    });