JSFiddle - React, Tailwind, and code Playground

by LyndseyB

Babel + JSX

const FORMS = (() => {

  // clears any open alerts on screen
  // this is a private method
  const clearAlerts = () => {
    let alerts = document.querySelectorAll('.alert');

    [].forEach.call(alerts, (alert) => {
      $(alert).remove();
    });
  };
  
  return {
  	showError: (form, customErrorStr = '') => {

      let defaultErrorStr = 'Please fill out all required fields';
      let errorStr = customErrorStr || defaultErrorStr;
      let alert = $(form).find('.alert');

      if(!alert.length) {
        // create an alert because there's none on screen
        alert = 
          `<div class='alert alert-danger alert-error'>
            <a href='#' class='close' data-dismiss='alert'>&times;</a>
            <strong>Error!</strong> ${errorStr}
          </div>`;
      } else {
        clearAlerts();     
      }

      $(form).prepend(alert);
    },
    showSuccess: (element, customSuccessStr = '') => {      
  	}
  };

})();

console.log(FORMS);