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

  /* Form Error Box
  ** @Param formElement - ID of form
  ** @Param customErrorStr (optional) - Custom html to be displayed in alert
  ** Returns HTML
  */
  const 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);
  };

  /* Form Success Box
  ** @Param formElement - ID of form
  ** @Param customSuccessStr (optional) - Custom html to be displayed in success box
  ** This function auto scrolls to top of page if the scrollbar is visible
  ** Returns HTML
  */
  const showSuccess = (element, customSuccessStr = '') => {      
  };
   
  return {
    showError, 
    showSuccess
  };

})();

console.log(FORMS);