CSS Style Sheet esp. for Error Message

#1

I only want to change the style of the pre code Error Messages nothing else …
Does anyone now where I can get a class, id or whatsoever to achieve this?
thx
R

#2

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.

#3

Well, I think it all works with a JavaScript so it’s hard to find the classes … I recently got this (which works with a lot of JS):

/*Error text styling*/ .errorSpan{ color: #fff; float: right; font-family: inherit; position: absolute; bottom: -20px; right: 0px; font-size: .85em; } /*Error field styling */ .hasError{ border: 1px solid red !important; background: #ffc4c4 !important; } .hide{ display:none; } .lp-form-errors{ display: none !important; }
#4

Hi @RafaelReyeros, welcome to the community :slightly_smiling_face:

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>
1 Like