Den :requiredpseudo klassen velgeren i CSS tillater forfattere å velge og stil noen matchet element med requiredattributtet. Skjemaer kan enkelt angi hvilke felt som må ha gyldige data før skjemaet kan sendes inn, men lar brukeren unngå ventetiden ved at serveren er den eneste validatoren for brukerens innspill.
La oss si at vi har en inngang med et attributt av type="name"og gjør det til en nødvendig inngang ved hjelp av det requiredboolske attributtet 1 :
Nå kan vi style den inngangen ved hjelp av :requiredpseudoklassevelgeren:
/* style all elements with a required attribute */ :required ( background: red; )Vi kan også utforme obligatoriske skjemafelt ved hjelp av enkle velgere, samt å koble sammen flere pseudoklassevalg:
/* style all input elements with a required attribute */ input:required ( box-shadow: 4px 4px 20px rgba(200, 0, 0, 0.85); ) /** * style input elements that have a required * attribute and a focus state */ input:required:focus ( border: 1px solid red; outline: none; ) /** * style input elements that have a required * attribute and a hover state */ input:required:hover ( opacity: 1; )Demo
Se pennen: nødvendig styling av Chris Coyier (@chriscoyier) på CodePen.
Interessepunkt
Den requiredattributt er behandlet som en boolsk betyr det krever ikke en verdi. Bare å ha requiredpå et element lar nettleseren vite at dette attributtet eksisterer, og den tilsvarende inngangen er faktisk et obligatorisk felt. Selv om det obligatoriske attributtet ifølge W3C-spesifikasjonen også fungerer med en tom verdi eller en verdi med attributtnavnet.
Det nødvendige attributtet ber også om at nettleseren skal bruke innfødte infomeldinger, for eksempel boblemeldingen som er vist fra demoen.
For de inngangene som ikke er stylet med :required, kan forfattere også tilpasse ikke-nødvendige elementer ved hjelp av :optionalpseudoklassevelgeren sammen med :invalidog :validsom utløses når et skjemafeltets datakrav blir oppfylt.
Formvalidering kan også komplimenteres sammen requiredmed patternattributtet for å hjelpe med å filtrere data, avhengig av inngangens typeattributt. Mønstre kan skrives som et vanlig uttrykk eller som en streng. I eksemplet nedenfor bruker vi et vanlig uttrykk for å matche syntaksen for en e-postadresse.
Den :requiredattributt arbeider med radioknapper. Hvis du setter påkrevd på en alternativknapp (eller alle), kreves den aktuelle gruppen med radioknapper. I avkrysningsruter krever hver enkelt avkrysningsrute (skal merkes av).
Nettleserstøtte
Disse nettleserstøttedataene er fra Caniuse, som har flere detaljer. Et tall indikerer at nettleseren støtter funksjonen i den versjonen og oppover.
Desktop
| Chrome | Firefox | DVS | Kant | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobil / nettbrett
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Boolske attributter : Et antall attributter i HTML5 er boolske attributter. Tilstedeværelsen av en boolsk attributt på et element representerer den sanne verdien, og fraværet av attributtet representerer den falske verdien. Hvis attributtet er til stede, må verdien enten være den tomme strengen eller en verdi som ikke skiller mellom store og små bokstaver for attributtets kanoniske navn, uten ledende eller etterfølgende mellomrom.