JSFiddle - React, Tailwind, and code Playground

by guyluchenbill

HTML

<form method="post">
  <label for="name">Name</label>
  <span id="nameError" class="e"></span>
  <input type="text" name="name" id="name" />
  <label for="email">E-Mail</label>
  <span id="emailError" class="e"></span>
  <input type="text" name="email" id="email" /> 
  <label for="phone">Phone</label>
  <span id="phoneError" class="e"></span>
  <input type="text" name="phone" id="phone" /> 
  <label for="subject">Subject</label>
  <span id="subjectError" class="e"></span>
  <input type="text" name="subject" id="subject" />
  <label for="message">Message</label>
  <span id="messageError" class="e"></span>
  <textarea name="message" id="message"></textarea>
  <input type="hidden" value="" name="bawtCheck" />
  <input type="submit" id="submit" class="submit" name="submit" />
</form>

CSS

label, span, input, textarea { 
  display: block;   
}
.e {
  color: red; 
}

JavaScript

// function quux(s) { return 'hello, ' + s } ['foo', 'bar', 'baz'].reduce(function (o, e) { o[e] = quux(e); return o }, {})
(function() { 
    var s = document.getElementById('submit'); 
    s.addEventListener('click', v, false); 

        var alphaRegex = /^[-\sa-zA-Z]+$/,
            phoneRegex = /^[(\[]?\d{3}[)-\.\] ]*\d{3}[-\. ]?\d{4}$/,
            messageRegex = /^[a-z ,.'-?]+$/i;
        var emailRegex = /^((["][a-zA-Z0-9_\-\.]+["])[ ]+[<]*)?([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)[>]?$/;
    
    function v(e) { 
        var name = document.getElementById('name').value,
            nameError = document.getElementById('nameError'),
            email = document.getElementById('email').value,
            emailError = document.getElementById('emailError'),
            phone = document.getElementById('phone').value,
            phoneError = document.getElementById('phoneError'),
            subject = document.getElementById('subject').value,
            subjectError = document.getElementById('subjectError'),
            message = document.getElementById('message').value,
            messageError = document.getElementById('messageError'),
            preventDefault = false,
            error = [];

        if (name === '' || !name.match(alphaRegex)) { 
            preventDefault = true; 
            nameError.textContent = 'Please enter your Name.'; 
        } else { 
            nameError.textContent = ''; 
        }
        if (email === '' || !email.match(emailRegex)) { 
            preventDefault = true; 
            emailError.textContent = 'Please enter a valid E-Mail Address.'; 
        } else { 
            emailError.textContent = ''; 
        }
        if (phone === '' || !phone.match(phoneRegex)) { 
            preventDefault = true; 
            phoneError.textContent = 'Please enter a valid Phone Number.'; 
        } else { 
            phoneError.textContent = ''; 
       ...