Wie kann ich eine eMail Adresse validieren? Formular Trick mit HTML, CSS und Javascript

Wer ein Formular in die eigene Webseite einbaut, der ist auf eine korrekte E-Mail-Adresse angewiesen – Fehler beim Eintippen sind schnell gemacht. Heute zeige ich euch, wie ihr eine E-Mail-Adresse beim Eingeben direkt validieren könnt.

Wenn also jemand seine E-Mail-Adresse wo eingeben möchte, dann sieht er sofort, ob die E-Mail-Adresse echt ist. Wenn ein @ fehlt oder komische Sonderzeichen irgendwo auftauchen oder die Länder-TLD-Suffix gar ganz fehlt – dann sieht der User sofort, dass es hier noch ein Problem gibt.

Und ihr als Admin habt danach die Gewissheit, dass diese E-Mail-Adresse funktionieren könnte.

(Ob eine E-Mail-Adresse dann echt ist, müsst ihr dann ja mit dem Double-Opt-in-Verfahren prüfen – was eh gesetzlich so vorgeschrieben ist.)

Heute zeige ich euch also, wie ihr so eine Eingabe relativ einfach validieren könnt.

Video

HTML

<div class="formular">
      <div class="gruppe">
        <label id="label">eMail</label>
        <input type="email" id="feld" spellcheck="false" onkeyup="validateMail()" />
        <span id="error"></span>
      </div>
</div>

CSS

.formular {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.gruppe {
  width: 90%;
  max-width: 600px;
  position: relative;
}

#feld {
  display: block;
  width: 100%;
  border: 0;
  border-bottom: 5px solid #555;
  background: transparent;
  outline: none;
  font-size: 25px;
  padding: 5px 2px;
  position: relative;
  z-index: 10;
}

#label {
  display: block;
  position: absolute;
  bottom: 5px;
  left: 2px;
  color: #777;
  font-size: 18px;
  transition: bottom 100ms;
}

#error {
  position: absolute;
  top: 100%;
  left: 2px;
  font-size: 16px;
  font-weight: 800;
  color: red;
  transition: top 100ms;
}

Javascript

var feld = document.getElementById("feld");
var label = document.getElementById("label");
var error = document.getElementById("error");

function validateMail(){
    label.style.bottom = "45px";

    if(!feld.value.match(/^[A-Za-z\._\-0-9]*[@][A-Za-z]*[\.][a-z]{2,4}$/)){
        error.innerHTML = "Bitte geb deine korrekte eMail Adresse ein";
        feld.style.borderBottomColor = "red";
        error.style.top = "120%";
    return false;
    }
    error.innerHTML = "";
    feld.style.borderBottomColor = "green";
    error.style.top = "100%";
    return true;
}