E-Mail-Feld mit Live-Prüfung
Wird grün mit Haken, wenn die E-Mail stimmt, sonst rot, mit kurzem Wackeln und einem Hinweis.
Einstellungen
Code
<label class="uv-in2v"><input placeholder="du@beispiel.de"><span class="ic"><svg class="ok" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5" pathLength="1"/></svg><svg class="no" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.8" stroke-linecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg></span><em class="hp">Gib eine gültige E-Mail-Adresse ein</em></label>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Wofür du ihn nutzen kannst
Einen Tippfehler in der E-Mail-Adresse abzufangen, bevor das Formular rausgeht, erspart allen Ärger. Setz es ins Newsletter-Feld im Footer, in die Registrierung einer App oder in den Gast-Checkout eines Shops. Geprüft wird beim Verlassen des Felds oder mit Enter, nicht schon beim Tippen. Eine E-Mail-Validierung in HTML, CSS und JavaScript.
Geprüft wird nur das Format, nicht ob die Adresse existiert, also validiere auch auf dem Server. Formulier den Hinweis in deinen eigenen Worten; „Da fehlt wohl noch was“ klingt freundlicher als eine steife Fehlermeldung.