:requiredPseido klases atlasītājs CSS ļauj autoriem izvēlēties un stila jebkuru pieskaņots elementu ar requiredatribūtu. Veidlapās var viegli norādīt, kuriem laukiem ir jābūt derīgiem datiem, pirms var iesniegt veidlapu, taču tas ļauj lietotājam izvairīties no gaidīšanas, kas rodas, serveram esot vienīgajam lietotāja ievades validatoram.
Pieņemsim, ka mums ir ievade ar atribūtu type="name"un padarīsim to par nepieciešamo ievadi, izmantojot requiredbūla atribūtu 1 :
Tagad mēs varam veidot ievades stilu, izmantojot :requiredpseido klases atlasītāju:
/* style all elements with a required attribute */ :required ( background: red; )Mēs varam arī noformēt nepieciešamos veidlapu laukus, izmantojot vienkāršus atlasītājus, kā arī sasaistot papildu pseidoklases atlasītājus:
/* 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; )Demonstrācija
Skatiet pildspalvu: Kriss Koijers (@chriscoyier) pieprasa stilu CodePen
Apskates vietas
requiredAtribūts tiek uzskatīta par loģiskajiem kas nozīmē, ka nav nepieciešams vērtību. Vienkārši requiredelementa lietošana ļauj pārlūkprogrammai uzzināt, ka šis atribūts pastāv, un atbilstošā ievade faktiski ir obligāts lauks. Lai gan saskaņā ar W3C specifikāciju nepieciešamais atribūts darbojas arī ar tukšu vērtību vai vērtību ar atribūtu nosaukumu.
Nepieciešamais atribūts arī pieprasa, lai pārlūkprogramma izmantotu vietējās norādes, piemēram, burbulis ziņojumu, kas attēlots no demonstrācijas.
Tiem ievadiem, kas nav veidoti, izmantojot :required, autori var arī pielāgot nevajadzīgos elementus, izmantojot :optionalpseidoklases atlasītāju kopā :invalidun :validkas tiek aktivizēti, kad tiek izpildītas formas lauka datu prasības.
Veidlapas validāciju var arī komplimentēt kopā requiredar patternatribūtu, lai palīdzētu filtrēt datus atkarībā no ievades typeatribūta. Šablonus var rakstīt kā regulāru izteiksmi vai virkni. Tālāk sniegtajā piemērā mēs izmantojam regulāru izteiksmi, lai saskaņotu e-pasta adreses sintaksi.
:requiredAtribūts darbojas radio pogas. Ja jūs ievietojat nepieciešamo vienu radiopogu (vai visas), būs vajadzīga konkrētā radiopogu grupa. Atzīmējot izvēles rūtiņas, katra atsevišķā izvēles rūtiņa ir nepieciešama (jāatzīmē).
Pārlūka atbalsts
Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.
Darbvirsma
| Chrome | Firefox | IE | Mala | Safari |
|---|---|---|---|---|
| 10 | 4 | 10 | 12 | 10.1 |
Mobilais / planšetdators
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4.4.3–4.4.4 | 10.3 |
1 Būla atribūti : Vairāki HTML5 atribūti ir būla atribūti. Būla atribūta klātbūtne uz elementa attēlo patieso vērtību, un atribūta neesamība ir viltus vērtība. Ja atribūts ir klāt, tā vērtībai jābūt vai nu tukšai virknei, vai vērtībai, kas ir atribūta kanoniskā vārda atbilstība mazajiem un mazajiem burtiem, bez sākuma vai aiz atstarpes.