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;   
}

JavaScript

(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 required = ['name', 'email', 'phone', 'subject', 'message'];
        
        function dgebid(required) { 
            var element = []; 
            for (var i=0; i<required.length;i++) { 
                var x = element.push(document.getElementById(required[i])); 
                console.log(x);
            }                        
        }
        /*
        var d = document.getElementById('$id'); 
        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 { 
 ...