JSFiddle - React, Tailwind, and code Playground

by bluey

HTML

<input id='book_email' stype='text' />

CSS

.validFormField {
		border-color: green;
}
.invalidFormField {
		border-color: #FC003F;
}

JavaScript

function validateFormInput(inputid) {
    //$('#'+inputid).css('border-color', 'green');
    $('#' + inputid).removeClass('invalidFormField');
    $('#' + inputid).addClass('validFormField');
}

function unValidateFormInput(inputid) {
    //$('#'+inputid).css('border-color', '#FC003F');
    $('#' + inputid).removeClass('validFormField');
    $('#' + inputid).addClass('invalidFormField');
}

$("input#book_email").keyup(function () {

    book_email = $('#book_email').val();
    elen = book_email.length;

    if (elen > 20) {
        //	errorAlert(book_email, 'Your first name must be a maximum of 20 characters!');
        unValidateFormInput('book_email');

    } else {
        validateFormInput('book_email');

    }

});