JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<form action="blah.html">
    name<input type="text" id="name" /><span id="nameError" class="e"></span><br />
    email<input type="text" id="email" /><span id="emailError" class="e"></span><br />
    message<input type="text" id="message" /><span id="messageError" class="e"></span><br />
    <input type="submit" id="submit" /> <br />
</form> 

<div id="output">
</div>

CSS

thx

JavaScript

var submit = document.getElementById('submit');
submit.addEventListener('click', validate, false);

function validate(e) {

    var name = document.getElementById('name').value,
        nameError = document.getElementById('nameError'),
        email = document.getElementById('email').value,
        emailError = document.getElementById('emailError'),        
        message = document.getElementById('message').value,
        messageError = document.getElementById('messageError'),
        nameRegex = /^[-\sa-zA-Z]+$/, 
        emailRegex = /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/,
        messageRegex = /^[\sa-zA-Z0-9]+$/; 
    
    if (name == '' || !name.match(nameRegex)) {
        e.preventDefault();
        nameError.textContent = 'Please enter a valid name.'; 
    } else { 
        nameError.textContent = ''; 
    }
    
    if (email == '' || !email.match(emailRegex)) {
        e.preventDefault();
        emailError.textContent = 'Please enter a valid email address';
    } else {
        emailError.textContent = '';
    }
    
    if (message == '' || !message.match(messageRegex)) {
        e.preventDefault();
        messageError.textContent = 'Please enter a valid message';
    } else {
        messageError.textContent = '';
    }    

    
}