Formular: Validierung

Formulare können durch clientseitige Funktionalität erweitert werden.

Varianten

Formular: Live-Validierung

Vorschau

Sie haben noch kein Konto? Stadt Wien Konto erstellen
Passwort vergessen? Passwort zurücksetzen

Code

<wm-form validate>
  <p>
    Sie haben noch kein Konto? <a href="#">Stadt Wien Konto erstellen</a><br>
    Passwort vergessen? <a href="#">Passwort zurücksetzen</a>
  </p>

  <form>
    <wm-input type="email" label="Email" required size="36"></wm-input>
    <wm-input type="password" label="Passwort" required size="36"></wm-input>

    <button>
      Anmelden
    </button>
  </form>
</wm-form>

Dev

Weitere Beispiele

Formular: Live-Validierung

Alle Formularelemente werden automatisch nativ validiert, wobei die Ausgabe der Fehler benutzerdefiniert ist. Gibt es mehr als einen Fehler, werden diese automatisch in einer Fehlerliste am Anfang des Formulars ausgegeben.

Vorschau

Code

<wm-form validate>
  <form>
    <wm-input type="text" label="Einzeiliges Eingabefeld" required size="36"></wm-input>
    <wm-input type="email" label="E-Mail" required size="36"></wm-input>
    <wm-input type="url" label="Url" required size="36"></wm-input>

    <wm-input type="password" label="Passwort" required size="36"></wm-input>

    <wm-upload label="Auswählen" name="upload2" validate required size="36">Datei Upload</wm-upload>
    <wm-upload label="Auswählen" name="upload3" multiple validate required size="36">Datei Upload</wm-upload>

    <wm-input type="combobox" label="Combobox" required size="36" filter togglebutton>
      <ul slot="options">
        <li>Option 1</li>
        <li data-value="b">Option 2</li>
        <li data-value="c">Option 3</li>
      </ul>
    </wm-input>

    <wm-checkbox labels="Checkbox" values="1" name="gruppe" required></wm-checkbox>

    <wm-radio legend="Radio" labels="Option 1; Option 2" values="val1;val2" name="radio" required></wm-radio>

    <wm-textarea name="textarea" required label="Mehrzeiliges Feld">
    </wm-textarea>

    <button>
      Anmelden
    </button>
  </form>
</wm-form>

Formular: Live-Validierung - Nur ein Element

Die Live-Validierung kann auch pro Feld aktiviert werden.

Vorschau

Sie haben noch kein Konto? Stadt Wien Konto erstellen
Passwort vergessen? Passwort zurücksetzen

Code

<wm-form>
  <p>
    Sie haben noch kein Konto? <a href="#">Stadt Wien Konto erstellen</a><br>
    Passwort vergessen? <a href="#">Passwort zurücksetzen</a>
  </p>

  <form>
    <wm-input type="email" label="Email" required size="36"></wm-input>
    <wm-input type="password" label="Passwort" required size="36" validate></wm-input>

    <button>
      Anmelden
    </button>
  </form>
</wm-form>

Formular: Live-Validierung - Kein Element live validieren

Vorschau

Sie haben noch kein Konto? Stadt Wien Konto erstellen
Passwort vergessen? Passwort zurücksetzen

Code

<wm-form>
  <p>
    Sie haben noch kein Konto? <a href="#">Stadt Wien Konto erstellen</a><br>
    Passwort vergessen? <a href="#">Passwort zurücksetzen</a>
  </p>

  <form>
    <wm-input type="email" label="Email" required size="36"></wm-input>
    <wm-input type="password" label="Passwort" required size="36"></wm-input>

    <button>
      Anmelden
    </button>
  </form>
</wm-form>

Formular: Live-Validierung - Anzeige von Maximalzeichenanzahl unterbinden

Vorschau

Code

<wm-form hideMaxlength>
  <form>
    <wm-input type="text" label="PLZ" required size="7" maxlength="4" ></wm-input>

    <wm-textarea label="Kommentar" maxlength="50"></wm-textarea>

    <button>
      Anmelden
    </button>
  </form>
</wm-form>

API

Abhängigkeiten

HTML

<script src="https://assets.wien.gv.at/theme/latest/js/components/Form/Form.js" type="module"></script>
<script src="https://assets.wien.gv.at/theme/latest/js/components/FormErrorsummary/FormErrorsummary.js" type="module"></script>

JavaScript

import { Form } from './wienermelange/assets/js/components/Form/Form.js';
    import { FormErrorsummary } from './wienermelange/assets/js/components/FormErrorsummary/FormErrorsummary.js';

Eigenschaften

Eigenschaften
Eigenschaft	Beschreibung	Werte	Default
`validate`	Eingabefeld live validieren Wenn auf true gesetzt, werden alle Kindelemente mit dem Attribut "validate" versehen, wodurch diese bei jeder Eingabe validiert werden und Fehlermeldungen sofort anzeigen. Dies ermöglicht eine sofortige Rückmeldung an den Benutzer, ohne auf die Formularübermittlung zu warten.	`Boolean`	`false`
`hideMaxlength`	Verfügbare Zeichenanzahl in Text-Eingabefeldern verbergen	`Boolean`	`false`
`hasValidationError`	Gibt an, ob das Formular Validierungsfehler enthält Wird auf true gesetzt, wenn nach einer Validierung Fehler vorhanden sind. Wird verwendet, um den Status des gesamten Formulars anzuzeigen.	`Boolean`	`false`
`_validationController`			`new FormValidationController(this, this._formControlRegistry)`

Slots

Name	Beschreibung
`default`	Contains the HTML form element und all form fields

Methoden

Eigenschaft	Optionen	Argumente
`getErrors`	Public method to get current errors	/

Kontakt

Haben Sie noch Fragen, Feedback oder brauchen Sie ein Element, das die Pattern Library noch nicht bietet?

handbuch@ma53.wien.gv.at