JSFiddle - React, Tailwind, and code Playground

by Manoj kumar Lakshman

HTML

Username:
<input id="uid" type="text" name="Uname" size="15" />
<label id="ulbl"></label>
</br>
</br>
</br>Password:
<input id="pid" type="text" name="Uname" size="15" />
<label id="plbl"></label>

CSS

.correct {
    color:green;
}
.wrong {
    color:red;
}

JavaScript

var exp = /^[a-zA-Z]*$/;
$('#uid').on("keyup", function () {
    if ($(this).val().length > 9 && exp.test($(this).val())) {

        $('#ulbl').html('<B>CORRECT<B>');
        $('#ulbl').removeClass('wrong');
        $('#ulbl').addClass('correct');
    } else if ($(this).val().length === 0) {
        $('#ulbl').html('');
        $('#ulbl').removeClass('wrong');
    } else {

        $('#ulbl').html('<B>WRONG<B>');
        $('#ulbl').removeClass('correct');
        $('#ulbl').addClass('wrong');

    }

});

$('#pid').on("keyup", function () {
    if ($(this).val().length > 6) {
        $('#plbl').html('<B>CORRECT<B>');
        $('#plbl').removeClass('wrong');
        $('#plbl').addClass('correct');
    } else if ($(this).val().length === 0) {
        $('#plbl').html('');
        $('#plbl').removeClass('wrong');
    } else {

        $('#plbl').html('<B>WRONG<B>');
        $('#plbl').removeClass('correct');
        $('#plbl').addClass('wrong');

    }

});