JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<h4>Your Name</h4>
<span id="nameError" class="e"></span>       
<input type="text" name="name" value="" id="name" />         
<h4>Email Address</h4>
<span id="emailError" class="e"></span>       
<input type="text" name="email" value="" id="email" />         
<h4 style="margin-bottom: 5px;">Message</h4>
<span id="messageError" class="e"></span>       
<textarea name="message" id="message"></textarea>         
<input type="submit" name="submit" value="Submit" class="submit" id="submit" />

CSS

.e { 
   color: red;  
}

input, span, textarea { 
  display: block;    
}

JavaScript

(function() { 
    
    var name = document.getElementById('name'); 
    name.addEventListener('blur', validateName, false); 

    function validateName() { 
        (name !== '') ? console.log('no name') : console.log('good name');         
    }
        
}());