Vlastní validační ikonky

Smartform umožňuje nastavit si vlastní stavové ikonky (defaultně zelená OK, červená při chybě).

V následující ukázce se stavové ikonky při zobrazení trochu zatočí.

Formulář s vlastními stavovými ikonkami s animací:

Zdrojový kód – JavaScript:

<script type="text/javascript" src="https://client.smartform.cz/v2/smartform.js" async></script>
<script type="text/javascript">
    var smartform = smartform || {};

    smartform.beforeInit = function () {
        smartform.setClientId('[clientId]');
    }
    
    smartform.afterInit = function() {
        smartform.getInstance().emailControl.setShowValidationStateEnabled(true);
        smartform.getInstance().emailControl.setShowMessageEnabled(true);
        smartform.getInstance().emailControl.setValidationStateCssClasses(
      'custom-valid-icon',
      'custom-warning-icon',
      '',
      'custom-waiting-icon');

    var input = document.getElementById('mail');
        input.classList.add('shake');
        input.addEventListener('animationend', function() {
        input.classList.remove('shake');
    });
    }
                                                                                                                                                                                        
</script>

Zdrojový kód – HTML pro formulář:

<form>
   <input class="smartform-email" id="mail" placeholder="Zadejte e-mailovou adresu" required="" type="text" />
</form>

Zdrojový kód – CSS:

/* Odebereme původní pozadí a připravíme prostor pro ikonu */
.custom-valid-icon,
.custom-warning-icon {
  background: none !important;
  padding-right: 2rem; /* Rezerva pro ikonku vpravo */
  position: relative;  /* Pro absolutní umístění pseudo-elementu */
}

/* Klíčové snímky pro otáčecí animaci */
@keyframes rotateIn {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pseudo-element pro validní stav (zelená fajfka) */
.custom-valid-icon::after {
  content: '';
  position: absolute;
  top: 50%; right: 0.5rem;
  width: 1rem; height: 1rem;
  margin-top: -0.5rem;  
  /* Bublina s fajfkou ve středu */
  background: #e0f7e9 url('data:image/svg+xml;utf8,\
') no-repeat center center;
  background-size: 1rem;
  /* Otočení ikonky při zobrazení */
  animation: rotateIn 0.6s ease-in-out;
  transform-origin: center center;
}

/* Pseudo-element pro varování (oranžový vykřičník) */
.custom-warning-icon::after {
  content: '';
  position: absolute;
  top: 50%; right: 0.5rem;
  width: 1rem; height: 1rem;
  margin-top: -0.5rem;
  /* Bublina s vykřičníkem ve středu */
  background: #fff4e5 url('data:image/svg+xml;utf8,\
') no-repeat center center;
  background-size: 1rem;
  /* Otočení ikonky při zobrazení */
  animation: rotateIn 0.6s ease-in-out;
  transform-origin: center center;
}

/* Třída pro stav čekání – modrý točící se spinner */
.custom-waiting-icon {
  position: relative;
  padding-right: 2rem; /* Rezerva pro spinner */
}
.custom-waiting-icon::after {
  content: '';
  position: absolute;
  top: 50%; right: 0.5rem;
  width: 1rem; height: 1rem;
  margin-top: -0.5rem;
  border: 2px solid #2196F3;
  border-top-color: transparent; /* Díra na spinneru */
  border-radius: 50%;
  animation: spin 0.8s linear infinite; /* Nekonečné otáčení */
}

/* Klíčové snímky pro spin animaci */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Shake animace pro celý input */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-8px); }
  40%, 80% { transform: translateX(8px); }
}
.shake {
  animation: shake 0.6s ease-in-out;
}