openHPI E-Mail-Validierung

by Thunderbolt

HTML

<form method="post">
<fieldset>
  <legend>E-Mail</legend>
  <!-- Quoted Labels wurden für die regex ausgelassen-->
  <input type="text" name="email" placeholder="[email protected]" pattern="[A-Za-z0-9!#$%&'*+-/=?^_`{|}~.]{1,64}@hpi.de" title="E-Mail Adresse im Format [name]@hpi.de, wobei [name] aus Buchstaben, Zahlen und den Zeichen !#$%&'*+-/=?^_`{|}~. bestehen darf!" required>
  <!-- Ohne gesetztes value-Attribut wird der Browser in der korrekten Sprache sprechen -->
  <input type="submit">
</fieldset>
</form>

CSS

* { transition: 2s;}
input:invalid{ border-color: red; background-color: coral; }
input:not([type=submit]):valid, form:valid fieldset{ 
  border-color: green; 
  background-color: greenyellow;
}
/* Als letztes, um vorherige Formattierungen ggf. zu überschreiben */
input:placeholder-shown { border-color: initial; background-color: initial; }

JavaScript

// JavaScript wird zur Lösung der Aufgabenstellung nicht benötigt!

// Sollte das E-Mail-Feld gelb hinterlegt werden, könnte das an der Formular-Autovervollständigung eures Webbrowsers liegen, welche die CSS-Formattierung überschreibt.