JSFiddle - React, Tailwind, and code Playground

by Sukanya Halder

HTML

<input name="emailAddress" />

CSS

ul li {
    display : none;
}
ul li:nth-last-child(-1n+5) {
    display : block;
}

JavaScript

$(document).ready(function () {

    $("input[name='emailAddress']").blur(function () {
        // Actual Email Validation function

        var hasError = false;
        var emailaddressVal = $("input[name='emailAddress']").val().trim();
        var invalidEmailAddresses = ['goddady.com', 'aol.com', 'yahoo.com', 'yahoo.fr'];

        if (!isValidEmailAddres(emailaddressVal)) {
            $("<span id='emailMessage'>The email provided does not contain an @ symbol</span>").insertAfter("input[name='emailAddress']");
            hasError = true;
        } else {
            debugger
            emailaddressVal = emailaddressVal.split('@').slice(1)[0].trim();

            if ($.inArray(emailaddressVal, invalidEmailAddresses) >= 0) {
                $("<span id='emailMessage'>The email provided is not from a business related domain. Please use an appropriate email address instead.</span>").insertAfter("input[name='emailAddress']");
            } else {
                $('#emailMessage').css('display', 'none');
            }
        }
        if (hasError == true) {
            return false;
        }
    });

    function isValidEmailAddres(emailID) {
        var regexExp = new...