JSFiddle - React, Tailwind, and code Playground

by voigtan

HTML

<html>
    <head>
    </head>
    <body>
        <div><input type="email" id="validate" width="50"><span id="validEmail"></span></div>
    </body>
</html>

CSS

#validEmail {
    margin-top: 4px;
    margin-left: 9px;
    position: absolute;
    width: 16px;
    height: 16px;
}

JavaScript

function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
    return pattern.test(emailAddress);
}

$(document).ready(function() {
    $("#validate").keyup(function(){
        var email = $("#validate").val();
        $("#validEmail").css({ "background": email.length !== 0 ? isValidEmailAddress(email) ? "#0d0" /* Valid */ : "#d00" /* Invalid */ : "none"  /* Empty */ });
    });
});