Placer‐Formularsteuerelemente sind formularassoziierte Custom Elements, was bedeutet, dass sie zusammen mit Formularen wie native <form>‐Steuerelemente abgeschickt werden. Dies wurde durch die ElementInternals‐API ermöglicht.
Wenn du keine clientseitige Validierung verwenden möchtest, kannst du dieses Verhalten durch das Hinzufügen des novalidate‐Attributs zum umgebenden <form>‐Element unterdrücken.
Da Placer Toolkit Formular‐Events abfängt, um die Dateneinspeisung und Validierung zu steuern, sollte deine eigene Formularlogik erst im Anschluss registriert werden. Stelle daher sicher, dass du deine Event‐Listener erst anhängst, nachdem das DOM vollständig geladen wurde oder die Formularsteuerelemente von Placer Toolkit erfolgreich mit dem DOM verbunden sind.
Clientseitige Validierung kann über die Constraint Validation API des Browsers für Placer‐Formularsteuerelemente aktiviert werden. Du kannst sie über Attribute wie required, pattern, minlength, maxlength usw. aktivieren. Placer Toolkit implementiert viele der gleichen Attribute wie native Formularsteuerelemente, prüfe jedoch die Dokumentation für eine Liste der unterstützten Eigenschaften jeder Komponente.
Wenn du keine clientseitige Validierung verwenden möchtest, kannst du dieses Verhalten durch Hinzufügen von novalidate zum umgebenden <form>‐Element unterdrücken.
Wenn diese Syntax ungewohnt aussieht, keine Sorge! Das Meiste, was du auf dieser Seite lernst, ist Plattformwissen, das auch für reguläre Formularsteuerelemente gilt.
Clientseitige Validierung kann die UX von Formularen verbessern, ersetzt jedoch keine serverseitige Validierung. Du solltest Benutzereingaben immer auf dem Server validieren und bereinigen!
Um ein Feld als Pflichtfeld zu markieren, verwende das Attribut required. Pflichtfelder erhalten automatisch ein * hinter ihrem Label. Dies ist über die benutzerdefinierte Eigenschaft --pc-input-required-content konfigurierbar.
Dieses Formular wird nicht gesendet, wenn ein Pflichtfeld unvollständig ist.
<form class="input-validation-required pc-stack"> <pc-input label="Name" name="name" required></pc-input> <pc-select label="Lieblingstier" clearable required> <pc-option value="birds">Vögel</pc-option> <pc-option value="cats">Katzen</pc-option> <pc-option value="dogs">Hunde</pc-option> <pc-option value="other">Andere</pc-option> </pc-select> <pc-textarea label="Kommentar" name="comment" required></pc-textarea> <pc-checkbox required>Kreuz mich vor dem Absenden an</pc-checkbox> <pc-button appearance="primary" type="submit">Absenden</pc-button></form><script type="module"> const form = document.querySelector(".input-validation-required"); form.addEventListener("submit", (event) => { event.preventDefault(); alert("Alle Felder sind gültig!"); });</script>
Um einen Wert auf ein bestimmtes Muster zu beschränken, verwende das Attribut pattern. Dieses Beispiel erlaubt nur die Buchstaben A–Z, das Formular wird also nicht gesendet, wenn eine Zahl oder ein Symbol eingegeben wird. Dies funktioniert nur mit <pc-input>‐Elementen.
<form class="input-validation-pattern pc-stack"> <pc-input label="Buchstaben" name="letters" pattern="[A-Za-z]+" required ></pc-input> <div class="buttons"> <pc-button appearance="primary" type="submit">Absenden</pc-button> <pc-button appearance="danger" variant="plain" type="reset"> Zurücksetzen </pc-button> </div></form><script type="module"> const form = document.querySelector(".input-validation-pattern"); form.addEventListener("submit", (event) => { event.preventDefault(); alert("Alle Felder sind gültig!"); });</script>
Einige Eingabetypen lösen automatisch Einschränkungen aus, z. B. email und url.
<form class="input-validation-type pc-stack"> <pc-input label="E-Mail" type="email" placeholder="test@beispiel.de" required ></pc-input> <pc-input label="URL" type="url" placeholder="https://beispiel.de" required ></pc-input> <div class="buttons"> <pc-button appearance="primary" type="submit">Absenden</pc-button> <pc-button appearance="danger" variant="plain" type="reset"> Zurücksetzen </pc-button> </div></form><script type="module"> const form = document.querySelector(".input-validation-type"); form.addEventListener("submit", (event) => { event.preventDefault(); alert("Alle Felder sind gültig!"); });</script>
Benutzerdefinierte Validierungsfehler
Um einen benutzerdefinierten Validierungsfehler zu erstellen, übergebe einen nicht‐leeren String an die Methode setCustomValidity(). Dies überschreibt vorhandene Validierungsbeschränkungen. Das Formular wird nicht gesendet, wenn eine benutzerdefinierte Validität gesetzt ist. Dann zeigt der Browser beim Absenden des Formulars einen Validierungsfehler an. Um das Feld wieder gültig zu machen, rufe setCustomValidity() erneut mit einem leeren String auf.
<form class="input-validation-custom pc-stack"> <pc-input label="Gib „placer toolkit“ ein" required></pc-input> <div class="buttons"> <pc-button appearance="primary" type="submit">Absenden</pc-button> <pc-button appearance="danger" variant="plain" type="reset"> Zurücksetzen </pc-button> </div></form><script type="module"> const form = document.querySelector(".input-validation-custom"); const input = form.querySelector("pc-input"); form.addEventListener("submit", (event) => { event.preventDefault(); alert("Alle Felder sind gültig!"); }); input.addEventListener("input", () => { if (input.value === "placer toolkit") { input.setCustomValidity(""); } else { input.setCustomValidity("Hey, du musst vor dem Absenden „placer toolkit“ eingeben!"); } });</script>
Benutzerdefinierte Validierung kann auf jedes Formularsteuerelement angewendet werden, das die Methode setCustomValidity() unterstützt. Sie ist nicht auf Inputs und Textareas beschränkt.
Benutzerdefinierte Validierungs‐Styles
Aufgrund der vielen Einsatzmöglichkeiten von Formularsteuerelementen liefert Placer Toolkit keine standardmäßigen Validierungs‐Styles.
Stattdessen werden die folgenden Custom States angewendet, um die Gültigkeit eines Steuerelements während der Interaktion anzuzeigen. Du kannst sie nutzen, um eigene Styles für beliebige Validierungszustände zu erstellen.
:state(required): Das Formularsteuerelement ist erforderlich.:state(optional): Das Formularsteuerelement ist optional.:state(invalid): Das Formularsteuerelement ist aktuell ungültig.:state(valid): Das Formularsteuerelement ist aktuell gültig.:state(user-invalid): Das Formularsteuerelement ist ungültig und der/die Nutzer:in hat damit interagiert.:state(user-valid): Das Formularsteuerelement ist gültig und der/die Nutzer:in hat damit interagiert.
Die Custom States entsprechen den Pseudo‐Klassen des Browsers für Validierung: :required, :optional, :invalid, :valid, :user-invalid und :user-valid.
Du kannst die Gültigkeit über die erwähnten Custom States ansprechen, es ist jedoch üblicher, :state(user-invalid) und :state(user-valid) zu verwenden, da diese erst nach Benutzerinteraktion angewendet werden. So erscheinen leere Felder nicht sofort als ungültig, was die UX verbessert.
Dieses Beispiel zeigt benutzerdefinierte Validierungs‐Styles mit :state(user-invalid) und :state(user-valid). Gib Werte ein, um die Gültigkeit mit Benutzerinteraktion zu sehen.
<form class="input-validation-custom-styles pc-stack"> <pc-input label="Name" name="name" hint="Wie möchtest du genannt werden?" autocomplete="off" clearable required ></pc-input> <pc-select name="animal" label="Lieblingstier" hint="Was ist dein Lieblingstier?" clearable required > <pc-option value="birds">Vögel</pc-option> <pc-option value="cats">Katzen</pc-option> <pc-option value="dogs">Hunde</pc-option> <pc-option value="other">Andere</pc-option> </pc-select> <pc-checkbox value="accept" required> Ich habe die Nutzungsbedingungen gelesen und akzeptiere sie. </pc-checkbox> <div class="buttons"> <pc-button appearance="primary" type="submit">Absenden</pc-button> <pc-button appearance="danger" variant="plain" type="reset"> Zurücksetzen </pc-button> </div></form><script type="module"> const form = document.querySelector(".input-validation-custom-styles"); form.addEventListener("submit", (event) => { event.preventDefault(); alert("Alle Felder sind gültig!"); });</script><style> /* Benutzerungültige Styles */ .input-validation-custom-styles pc-input:state(user-invalid)::part(input), .input-validation-custom-styles pc-select:state(user-invalid)::part(combobox), .input-validation-custom-styles pc-checkbox:state(user-invalid)::part(control) { border-color: var(--pc-color-danger-border-loud); } .input-validation-custom-styles :state(user-invalid):not(pc-button)::part(label), .input-validation-custom-styles :state(user-invalid)::part(hint), .input-validation-custom-styles pc-checkbox:state(user-invalid)::part(label) { color: var(--pc-color-danger-on-quiet); } .input-validation-custom-styles pc-checkbox:state(user-invalid)::part(control) { outline: none; } .input-validation-custom-styles pc-input:focus-within:state(user-invalid)::part(input), .input-validation-custom-styles pc-select:focus-within:state(user-invalid)::part(combobox), .input-validation-custom-styles pc-checkbox:focus-within:state(user-invalid)::part(control) { border-color: var(--pc-color-danger-border-loud); outline-color: var(--pc-color-danger-border-loud); } /* Benutzergültige Styles */ .input-validation-custom-styles pc-input:state(user-valid)::part(input), .input-validation-custom-styles pc-select:state(user-valid)::part(combobox), .input-validation-custom-styles pc-checkbox:state(user-valid)::part(control) { border-color: var(--pc-color-success-border-loud); } .input-validation-custom-styles :state(user-valid):not(pc-button)::part(label), .input-validation-custom-styles :state(user-valid)::part(hint), .input-validation-custom-styles pc-checkbox:state(user-valid)::part(label) { color: var(--pc-color-success-on-quiet); } .input-validation-custom-styles pc-checkbox:state(user-valid)::part(control) { background-color: var(--pc-color-success-border-loud); outline: none; } .input-validation-custom-styles pc-input:focus-within:state(user-valid)::part(input), .input-validation-custom-styles pc-select:focus-within:state(user-valid)::part(combobox), .input-validation-custom-styles pc-checkbox:focus-within:state(user-valid)::part(control) { border-color: var(--pc-color-success-border-loud); outline-color: var(--pc-color-success-border-loud); }</style>
Standardmäßig verwenden Placer‐Formularsteuerelemente die browserbasierten Tooltip‐Fehlermeldungen. Es gibt keinen Mechanismus, der Fehlermeldungen direkt im Formular anzeigt und gleichzeitig mit nativen Formularsteuerelementen sowie anderen Custom Elements funktioniert. Du kannst jedoch deine eigene Lösung implementieren.
Um die Fehlermeldungen des Browsers zu deaktivieren, musst du das pc-invalid‐Event abbrechen. Dann kannst du eigene Inline‐Validierungsfehler anwenden. Dieses Beispiel zeigt eine primitive Umsetzung.
<form class="input-validation-inline"> <pc-input label="Name" name="name" hint="Wie möchtest du genannt werden?" autocomplete="off" clearable required ></pc-input> <div id="name-error" aria-live="polite" hidden></div> <div class="buttons"> <pc-button appearance="primary" type="submit">Absenden</pc-button> <pc-button appearance="danger" variant="plain" type="reset"> Zurücksetzen </pc-button> </div></form><script type="module"> const form = document.querySelector(".input-validation-inline"); const nameError = document.querySelector("#name-error"); form.addEventListener( "pc-invalid", (event) => { event.preventDefault(); nameError.innerHTML = ` <pc-icon library="default" icon-style="solid" name="circle-exclamation" style=" translate: 0 0.125rem; margin-inline-end: 0.125rem; " ></pc-icon> ${event.target.validationMessage} `; nameError.hidden = false; event.target.focus(); }, { capture: true }, ); form.addEventListener("submit", (event) => { event.preventDefault(); nameError.hidden = true; nameError.innerHTML = ""; setTimeout(() => alert("Alle Felder sind gültig!"), 50); }); form.addEventListener("reset", (event) => { nameError.hidden = true; nameError.innerHTML = ""; });</script><style> .input-validation-inline #name-error { color: var(--pc-color-danger-on-quiet); font-size: var(--pc-font-size-smaller); } .input-validation-inline .buttons { margin-block-start: var(--pc-spacing-l); }</style>
Dieses Beispiel soll das Konzept der Inline‐Fehlermeldungen demonstrieren. Es ist nicht für komplexere Formulare gedacht. Nutzer:innen, die diese Funktion benötigen, sollten eine geeignete Validierungslösung basierend auf den gezeigten Techniken implementieren. Abhängig von der Umsetzung können benutzerdefinierte Fehlermeldungen die Barrierefreiheit der Formularsteuerelemente beeinflussen.