JSFiddle - React, Tailwind, and code Playground

by Neels Grobler

HTML

Type in an email address: <input id="email" type="text" />
<div id="valid" class="warning">Email is empty</div>

CSS

#valid {
    transition: background-color 1s;
    width: 200px;
    height: 25px;
    border-radius: 10px;
    padding: 10px;
    margin: 10px;
}
.warning {background-color: #eb0;}
.error {background-color: #f40;}
.okay {background-color: #8d4;}

JavaScript

$(document).ready(function() {
    var emailValid = 'w';
    var emailRegex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
    var $email = $('#email');
    var $valid = $('#valid');
    $email.keyup(function() {
        var emailValue = $email.val();
        if (emailValue.length == 0) {
            if (emailValid != 'w') {
                $valid.html('Email is empty');
                emailValid = 'w';
            }
        } else if (emailRegex.test(emailValue)) {
            if (emailValid != 'o') {
                $valid.html('Valid email address');
                emailValid = 'o';
            }
        } else {
            if (emailValid != 'e') {
                $valid.html('Invalid email address');
                emailValid = 'e';
            }
        }
        emailValid == 'e' ? $valid.addClass('error') : $valid.removeClass('error');
        emailValid == 'o' ? $valid.addClass('okay') : $valid.removeClass('okay');
        emailValid == 'w' ? $valid.addClass('warning') : $valid.removeClass('warning');
    });
});