Den :requiredpseudo klass väljaren i CSS tillåter författare att välja och stil varje matchas elementet med requiredattributet. Formulär kan enkelt ange vilka fält som måste ha giltig data innan formuläret kan skickas, men gör det möjligt för användaren att undvika väntan genom att servern är den enda valideraren för användarens inmatning.
Låt oss säga att vi har en ingång med ett attribut av type="name"och gör det till en nödvändig ingång med det requiredbooleska attributet 1 :
Nu kan vi utforma den ingången med hjälp av :requiredpseudoklassväljaren:
/* style all elements with a required attribute */ :required ( background: red; )Vi kan också utforma obligatoriska formulärfält med enkla väljare samt kedja ihop ytterligare pseudoklassväljare:
/* 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 pennan: krävs styling av Chris Coyier (@chriscoyier) på CodePen.
Intressanta platser
Det requiredattribut behandlas som ett booleskt vilket betyder att den inte kräver ett värde. Att bara ha requiredpå ett element låter webbläsaren veta att detta attribut existerar och motsvarande ingång är faktiskt ett obligatoriskt fält. Även om det enligt W3C-specifikationen det attribut som krävs också fungerar med ett tomt värde eller ett värde med attributnamnet.
Det attribut som krävs begär också att webbläsaren ska använda infödda bildtexter, till exempel bubbelmeddelandet som visas i demo.
För de ingångar som inte utformats med :required, kan författare också anpassa icke-nödvändiga element med hjälp av :optionalpseudoklassväljaren tillsammans med :invalidoch :validsom utlöses när ett formulärfälts datakrav uppfylls.
Formvalidering kan också kompletteras tillsammans requiredmed patternattributet för att hjälpa till att filtrera data beroende på ingångens typeattribut. Mönster kan skrivas som ett reguljärt uttryck eller som en sträng. I exemplet nedan använder vi ett reguljärt uttryck för att matcha syntaxen för en e-postadress.
Det :requiredattribut fungerar på alternativknappar. Om du sätter på en alternativknapp (eller alla) krävs den specifika gruppen av radioknappar. I kryssrutor gör varje enskild kryssruta obligatorisk (ska markeras).
Webbläsarstöd
Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.
Skrivbord
| Krom | Firefox | IE | Kant | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobil / surfplatta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3-4.4.4 | 10.3 |
1 Booleska attribut : Ett antal attribut i HTML5 är booleska attribut. Närvaron av ett booleskt attribut på ett element representerar det sanna värdet och frånvaron av attributet representerar det falska värdet. Om attributet är närvarande måste dess värde antingen vara den tomma strängen eller ett värde som är skiftlägeskänslig matchning för attributets kanoniska namn, utan ledande eller efterföljande tomt utrymme.