CSS Style Sheet esp. for Error Message

I think the in-line errors were recently updated so I am not too sure if this is actually still the relevant CSS.

In any case, this is a response from one of the Unbounce Experts and it includes the class/id’s for form errors.

Hi @RafaelReyeros, welcome to the community 🙂

As @Kyle.C pointed out there has been som changes, so the css needed a fix. This is how I styled my inline errors.

For that you need this script and css

<style>
  .errorSpan {
    display: none;
  }
  .hasError .errorSpan {
    display: block;
    color: #717a8a;
    position: absolute;
    right: 0px;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    z-index: 10;
    right: 10px;
    bottom: 10px;
    height: 30px;
    font-size: 11px;
    line-height: 29px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background-color: #ffefa6;
    border: 1px solid #ffde4d;
    padding: 0 15px;
    
  }
  .hasError input,
  .hasError textarea,
  .hasError select {
    border: 2px solid red !important;
  }
</style>

<script>
  (function() {
    function matches(element, selector) {
      return (
        Element.prototype.matches ||
        Element.prototype.msMatchesSelector ||
        Element.prototype.webkitMatchesSelector
      ).call(element, selector);
    }
    function closest(element, selector) {
      if (Element.prototype.closest) {
        return element.closest(selector);
      }
      if (matches(element, selector)) {
        return element;
      }
      if (element.parentElement) {
        return closest(element.parentElement, selector);
      }
      return null;
    }
    function updateErrorMessage(inputElement) {
      var container = closest(inputElement, '.lp-pom-form-field');
      var errorSpan = container.querySelector('.errorSpan');
      if (!errorSpan) {
        errorSpan = document.createElement('span');
        errorSpan.classList.add('errorSpan');
        container.appendChild(errorSpan);
      }
      errorSpan.textContent = inputElement.validationMessage;
    }
    function handleInput(event) {
      setTimeout(function() {
        if (event.target.validity.valid) {
          closest(event.target, '.lp-pom-form-field').classList.remove('hasError');
        }
        updateErrorMessage(event.target);
      });
    }
    function handleInvalid(event) {
      event.preventDefault();
      closest(event.target, '.lp-pom-form-field').classList.add('hasError');
      updateErrorMessage(event.target);
      if (!document.activeElement || document.activeElement instanceof HTMLButtonElement) {
        event.target.focus();
      }
    }
    var form = document.querySelector('.lp-pom-form form');
    form.addEventListener('input', handleInput);
    form.addEventListener('change', handleInput);
    form.addEventListener('invalid', handleInvalid, true);
  })();
  /**
   * Do not remove this section; it allows our team to troubleshoot and track feature adoption.
   * TS:0002-03-080
   */
</script>