JSFiddle - React, Tailwind, and code Playground

HTML

<div id="formstyle">
<h1 style="margin-top:80px; margin-bottom:10px;">Stay connected</h1>
<form action="subscribe.php" method="post"> 
<input type="email" id="name" name="name" placeholder="&nbsp;Email" />
<div class="error-message"></div>
<input style="margin-top:25px; padding:8px 0px 10px 0px;" id="namepopup" type="button" value="Submit"/>
</form>

JavaScript

$(function() {
$("#name").keyup(function(){
if(!$("#name").val().match(/^[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\@[a-zA-Z0-9_]+(\.[a-zA-Z0-9_]+)*\.[a-zA-Z]{2,4}$/i)) {
$("#name").next(".error-message").show().text("enter a valid email before to press enter");
}
else {
$("#name").next(".error-message").hide().text("");
}

});
    
$("#name").on("keydown", function(e) {
    if(e.which === 13) {
        if($("#name").next(".error-message").is(":visible") || !$("#name").val()) {
            e.preventDefault();
            return false;
        }
        
        CoverPop.close();
    }
});

$("#namepopup").on("click", function(e) { 
    if($("#name").val() && !$("#name").next(".error-message").is(":visible")) { 
        CoverPop.close();
        $('#formstyle form').submit();
    }
});
});