JSFiddle - React, Tailwind, and code Playground

HTML

<input type="text" maxlength="128" size="60" value="" id="user_email" class="user-send-email float-right form-text" placeholder="Enter email (optional)" name="email">


<div class="masked-check">
    <div class="form-item form-type-checkbox form-item-stay-anonymous">
 <input type="checkbox" class="form-checkbox" value="1" name="stay_anonymous" id="edit-stay-anonymous">  <label for="edit-stay-anonymous" class="option"><i class="icon-ok"></i><span>Stay Anonimous</span> </label>

</div>
</div>

CSS

.masked-check { display: none }

JavaScript

function validateEmail(){

    var validEmail = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
    $('#user_email').blur(function(){
        if (validEmail.test(this.value)) {
            $('.masked-check').fadeIn(300)
        }
        else {
            //$('.masked-check').fadeOut(300);
            alert('Please enter a valid email');                                
        }
    });    
}

validateEmail();