JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<form name="myForm" method="post">
  First Name: <input type="text" name='firstName'>  <br>
  Last Name:<input type="text" name='lastName'> <br>
  Email Address:<input type="text" name='emailAddress'> <br>
  
  <button type="submit" name="submitForm">Go!</button>
</form>

CSS

.c-alert {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 5px;
  border-width: 1px;
  border-style: solid;
}

.c-alert--warn {
  background-color: #ffcac6;  
  border-color: #f2a3a3;
  color: #7c5151;
}

.c-alert--ok {
  background-color: #a4e9a0;
  border-color: #8ac687;
  color: #3b7437;
}

.c-alert--info {
  background-color: #bbe6f0;
  border-color: #9fcbd5;
  color: #4d8b99;
}

JavaScript

(function() {
	var ajaxRequest = function ajaxRequest(url, data, callback) {
  	var request = new XMLHttpRequest();
    
    if(!request) {
    	return;
    }
    
    if(callback && typeof callback === 'function') {
    	request.onreadystatechange = function() {
      	if(request.readyState === XMLHttpRequest.DONE) {
        	if(request.status === 200) {           
         		callback(null, request);
            return;
          }
          callback('Request failed with status: ' + request.status);
        }      	
      }
    }
    
    request.open('POST', url);
    request.setRequestHeader('Content-Type', 'application/json');
    request.send(JSON.stringify(data));
  };
  
  var createAlert = function(type, message) {  	
  	var alertClass = 'c-alert c-alert--' + type;    
    var existingAlert = document.querySelector('.c-alert');
    
    if(existingAlert === null) {
   		return '<div class="' + alertClass + '">' + message + '</div>';
    }
    existingAlert.classList.add('c-alert--' + type);
    existingAlert.innerHTML = message;
  };
 
  var myForm = document.querySelector('[name="myForm"]');
  var alert = null;
  
  myForm.addEventListener('submit', function(e) {
  	e.preventDefault();
    
    var fields = myForm.querySelectorAll('input');
    var emptyFields = [].filter.call(fields, function(field) {
    	return field.value === '';
    });
    
    if(emptyFields.length > 0) {
    	alert = createAlert('warn', 'Please fill out all fields');
      
      if(alert) {
      	myForm.insertAdjacentHTML('afterbegin', alert);
      }
      return;
    }    
    
    var formData = [].reduce.call(fields, function(data, field) {
    	var fieldName = field.getAttribute('name');
      var fieldValue = field.value;
      
      if(!data[field]) {
      	data[fieldName] = fieldValue;
      }
      
      return data;
    }, {});
    
    ajaxRequest('/echo/json/', formData, function(err, response) {
    	if(err) {        
      	throw(err);
      }
      alert =...