HTML tarjoaa sisäänrakennetun validoinnin attribuuttien kautta, joten selain estää virheellisiä lähetyksiä ja näyttää viestejä — JavaScript:ää ei tarvita.
html
Submit
HTML tarjoaa sisäänrakennetun validoinnin attribuuttien kautta, joten selain estää virheellisiä lähetyksiä ja näyttää viestejä — JavaScript:ää ei tarvita.
Submit
Validointiattribuutit: required, min/max, minlength/maxlength, pattern (regex) ja tyyppi itse (email, url, number). Lähetyksen yhteydessä selain tarkistaa ne, pysäyttää lähetyksen, jos jokin epäonnistuu, ja näyttää natiivisen ilmoituspallon ensimmäisessä virheellisessä kentässä.
input:invalid { border-color: red; }
input:valid { border-color: green; }
input:user-invalid { border-color: red; } /* only after the user has interacted — nicer UX */
Voit lukea ja mukauttaa validointia JavaScriptissä:
const input = document.querySelector("input");
input.validity.valueMissing; // true if required and empty
input.validity.typeMismatch; // true if email/url format is wrong
input.checkValidity(); // returns boolean, fires invalid event
input.setCustomValidity("Passwords don't match"); // custom error message
setCustomValidity mahdollistaa sääntöjen lisäämisen, joita attribuutit eivät voi ilmaista (esim. "salasanojen vahvistus vastaa").
<form novalidate>...</form> <!-- skip native validation (handle in JS) -->
Validoi aina myös palvelimella — asiakkaan puolen validointi on käyttöliittymän parantamista varten; käyttäjät voivat ohittaa sen.
Natiivi validointi antaa sinulle saavutettavia, lokalisoituja virheilmoituksia ja välitöntä palautetta ilmaiseksi.
Yhdistä deklaratiiviset attribuutit Constraint Validation API:aan mukautettuja sääntöjä varten — mutta älä luota siihen ainoana puolustuskerroksena; palvelimen on myös vahvistettava.