വ്യാജ ക്ലാസ്സുകളുടെ ഒരു റീക്യാപ്പ്

ഒരു സ്യൂഡോ ക്ലാസ്, ഡോക്യുമെന്റ് ട്രീയിലുള്ള ഒരു മൂലകത്തെ കുറിച്ചുള്ള വിവരങ്ങൾ ആണ്, എന്നാൽ ഏതെങ്കിലും നിർദ്ദിഷ്ട ആട്രിബ്യൂട്ടുകൾ വഴി ലഭ്യമല്ല. ഉദാഹരണത്തിന്, മാ താപിതാക്കളു ടെ ആദ്യത്തെ കുട്ടിയായ ഘടകങ്ങൾക്ക് "ഫസ്റ്റ്-ചൈൽഡ് സ്യൂഡോ-ക്ലാസ്സ്" ബാധകമാണ്. DOM മരത്തിൽ നിന്ന് നിങ്ങൾക്ക് ആ വിവരങ്ങൾ ലഭിക്കും, എന്നാൽ ഫസ്റ്റ്-ച ൈൽഡ് ആട്രിബ് യൂട്ട് ഇല്ല.

CSS2.1-ൽ, ഒരു പിടി വ്യാജ ക്ലാസുകൾ ലഭ്യമായിരുന്നു, പ്രത്യേകിച്ച് ലിങ്ക് സ്റ്റേറ്റുകൾ (:ലിങ് ക്, : സന ്ദർശനം), ഉപയോക്തൃ പ്രവർത്തനങ്ങൾ (:activ e,:hove r ) എന്ന ിവ. CSS3-ൽ, ആ പിടി ഒരു ബാസ്കറ്റിയായി മാറുന്നു, ഘടനയുടെ (:nth-child, :nt h-of-type ), UI എലമെന് റ് (:പ്രാപ്തമ ാക്കിയ, : checked ), പിന്നെ ഫോം വാലിഡേഷന്റെ ഇപ്പോൾ നമ്മൾ കാണുന്നവ.

ജാവാസ്ക്രിപ്റ്റ് ഇല്ലാതെ ഫോം വാലിഡേഷൻ

അതിനാൽ, തുടക്കത്തിൽ ഞാൻ സൂചിപ്പിച്ചതുപോലെ, ജാവാസ്ക്രിപ്റ്റ് ആവശ്യമില്ലാതെ തന്നെ എച്ച്ടിഎംഎൽ5 ക്ലയിന്റ്-സൈഡ് ഫോം വാലിഡേഷൻ അവതരിപ്പിക്കുന്നു. നിങ്ങൾ ഒരു ഫോം സമർപ്പിക്കാൻ ശ്രമിക്കുമ്പോൾ, നിങ്ങളുടെ ബ്രൗസർ എല്ലാ ഫീൽഡുകളും വാലിഡേറ്റ് ചെയ്യുകയും ഏതെങ്കിലും ഫീൽഡുകൾ തെറ്റാണെങ്കിൽ ഒരു പിശക് തിരികെ നൽകുകയും ചെയ്യും. ഇത് മിക്കവാറും ഓട്ടോമാജിക്കൽ ആയി സംഭവിക്കും – നിങ്ങളുടെ ബ്രൗസറിന് ശേഷി യുണ്ട് – ചിത്രം 1-ൽ കാണിച്ചിരിക്കുന്നതുപോലെ തോന്നും:

ആ പിശക് സന്ദേശങ്ങൾ ബ്രൗസറും ഒ.എസും നിർദ്ദിഷ്ടമാണ്, പരിഷ്കരിക്കാൻ ബുദ്ധിമുട്ടാണ് (എന്റെ ബ്ലോഗിൽ ഞാൻ രേഖപ്പെടുത്തിയിട്ടുണ്ട്), എന്നാൽ CSS3 അടിസ്ഥാന UI മൊഡ്യൂളിന്റെ ഭാഗമായ പുതിയ മൂല്യനിർണ്ണയം സ്യൂഡോ ക്ലാസുകളിൽ തന്നെ പിശകുകൾ പ്രത്യക്ഷപ്പെടുന്ന രീതി നിങ്ങൾക്ക് മാറ്റാവുന്നതാണ്.

ലേഖനം കടന്നുപോകുമ്പോൾ നിലവിലെ ബ്രൗസർ പിന്തുണ ഞാൻ കവർ ചെയ്യും, എന്നാൽ ചുരുക്കത്തിൽ:

• ഫയർഫോക്സും IE10-ഉം ഇതിൽ ചിലതു പിന്തുണയ്ക്കുന്നു.
• ഓപ്പറയും ക്രോമും എല്ലാം പിന്തുണയ്ക്കുന്നു.
• സഫാരി എല്ലാ പിന്തുണയ്ക്കുന്നു, എന്നാൽ ഫോം വാലിഡേഷൻ സ്വതവേ പ്രവർത്തനരഹിതമാണ്.

അങ്ങനെയാണെങ്കിൽ, ഞാൻ കാണിച്ചുതരുന്ന ഉദാഹരണങ്ങൾ കാണുന്നതിന് Chrome, Opera അല്ലെങ്കിൽ സഫാരി ഉപയോഗിക്കാൻ ഞാൻ ശുപാർശ ചെയ്യുന്നു.

ഫോം വാലിഡേഷൻ വേണ്ടി ബ്രൗസർ പിന്തുണ യുമായി നിങ്ങൾ അപ് ഡേറ്റ് ചെയ്യാൻ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ഞാൻ എപ്പോൾ ഉപയോഗിക്കാൻ കഴിയും എന്ന് ഒരു കണ്ണ് വയ്ക്കാൻ ഞാൻ നിർദ്ദേശിക്കുന്നു.

അതുകൊണ്ട് വിരസമായ എല്ലാ സാങ്കേതിക ഗഫ് വഴി, രസകരമായ ടെക്നിക്കൽ ഗഫ് പോയി ഫോം വാലിഡേഷൻ ചില ഉദാഹരണങ്ങൾ നോക്കാം.

ആവശ്യമുള്ളതും ഐച്ഛികവുമായ ഘടകങ്ങൾ

മൂല്യനിർണ്ണയത്തിന്റെ ഏറ്റവും സാധാരണമായ പാറ്റേണുകളിൽ ഒന്ന് നിർബന്ധമായും (അതായത്, ആവശ്യമാണ്) മൂല്യങ്ങൾ ആണ് – പുരോഗതിക്ക് ഉപയോക്താവ് പൂർത്തിയാക്കേണ്ട ഫീൽഡുകൾ. ഒരു ഫോം എലമെന്റ് നിർബന്ധമാണെന്ന് അടയാളപ്പെടുത്തുന്നതിന്, ആവശ്യമായ ആട്രിബ്യൂട ്ട് മാത്രം അതിൽ ചേർക്കേണ്ടതുണ്ട്:

<input type="text" required>

ആ ആവശ്യകത കാണിക്കുന്നതിന് സ്റ്റൈലുകൾ പ്രയോഗിക്കാൻ നിങ്ങൾ ആഗ്രഹിക്കുന്നുവെങ്കിൽ, ആവശ്യമായ ആട്രിബ്യൂട്ട് ഉള് ള ഏതെങ്കില ും പൊരുത്തമുള്ള എലമെൻറിന് നിയമങ്ങൾ ബാധകമായ പുതിയ "ആവശ്യമുള്ള സ്യൂഡോ ക്ലാസ്" നിങ്ങൾക് ക് ഉപയോഗിക ്കാവുന്നതാണ്. ഉദാഹരണത്തിന്, ലേബലിന്റെ പദാവലിക്ക് ശേഷം ഒരു ആസ്റ്ററിസ്ക് ഇടാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം:

input:required + label::after { content: "*"; }

നിങ്ങൾ ഉപയോഗിക്കുന്ന കൃത്യമായ നിയമങ്ങൾ നിങ്ങളുടെ രേഖ എങ്ങനെ അടയാളപ്പെടുത്തിയിരിക്കുന്നു എന്നതിനെ ആശ്രയിച്ചിരിക്കും. ഈ ഉദാഹരണത്തിലെ നിയമം ഈ ഘടനയുള്ള മാർക്കപ്പ് അടിസ്ഥാനമാക്കിയുള്ളതാണ്:

<input type="text" required id="foo">
<label for="foo">ഫൂ</label>

ആവശ്യമുള്ളതിന്റെ വിപരീതം, തീർച്ചയായും, ഐച്ഛികമാണ്. അത് നിങ്ങള് ക്ക് അറിയില്ലേ, ഞങ്ങള് ക്കും ഒരു വ്യാജ ക്ലാസ് ഉണ്ട്, യുക്തിപരമായ ി:ഐച്ഛികം . ആവശ്യമില്ലാത്ത ഒരു ആട്രിബ്യൂട്ട് ഇല്ലാത്ത ഏതെങ്കിലും ഫോം എലമെ ന്റിനെ ഇത് ബാധിക്കുന്നു. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഭാരം കുറഞ്ഞ അതിർത്തി ഉണ്ടാക്കാൻ താൽപ്പര്യമുണ്ടായേക്കാം:

input:ഐച്ഛികം { അതിർത്തി- നിറം: വെള്ളി; }

ചിത്രം 2-ൽ നിങ്ങൾക്ക് ഇത് കാണാൻ കഴിയും അല്ലെങ്കിൽ ഒരു ലൈവ് ഉദാഹരണം കാണുക.

സാധുതയുള്ളതും അസാധുവായതുമായ ഘടകങ്ങൾ

"ആവശ്യമുള്ള" അല്ലെങ്കിൽ "ഐച്ഛികം" എന്നതിനു പുറമേ മറ്റ് തരത്തിലുള്ള വാലിഡേഷൻ ഉണ്ട്. ഇമെയിൽ വിലാസം വാലിഡേഷൻ പോലുള്ള പാറ്റേൺ പൊരുത്തപ്പെടുത്തൽ നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്നതാണ്:

<input type="email">

ഉപയോക്താവ് ഫീൽഡിൽ എന്തെങ്കിലും എന്റർ ചെയ്യുകയാണെങ്കിൽ, അത് ഒരു ഇമെയിൽ വിലാസത്തിന്റെ പാറ്റേണുമായി പൊരുത്തപ്പെടേണ്ടതുണ്ട്, അല്ലെങ്കിൽ അത് അസാധുവായി അടയാളപ്പെടുത്തും. (തീർച്ചയായും, അത് ആവശ്യമില്ലെങ്കിൽ, അത് ശൂന്യമായി വിടാം.)

സാധുതയുള്ളതോ അസാധുവായതോ ആയ ഫോം എലമെന്റുകൾ നിങ്ങൾക്ക് ശൈലിയിൽ സ്റ്റൈൽ ചെയ്യാം – കാത്തിരിക്കുക – സാധുതയുള്ള തും അസ ാധുവാവ ുന്നതും ആയ വാലിഡേഷൻ നിലയെ അടിസ്ഥാനമാക്കി ഒരു ചിഹ്നം ചേർക്കാം:

input:invalid + label:::after { content: ' ⨉'; } input:valid + label::after { content: ' ' }

പേജ് ലോഡ് ചെയ്താലുടൻ ഇവ പ്രാബല്യത്തിൽ വരും, അതിനാൽ, സബ്മിഷനു ശേഷം മാത്രം അവ പ്രയോഗിക്കാൻ നിങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കാൻ ആഗ്രഹിക്കും, ഒരുപക്ഷേ, ഒരുപക്ഷേ, ജാവാസ്ക്രിപ്റ്റുമൊത്തുള്ള ഫോമിലേക്ക് ഒരു ക്ലാസ്സ് ചേർക്കുക:

document.forms[0].addEventശ്രോതാവ് ('സമര് പ്പിക്കുക', ഫങ്ഷന് (e) { e.currentTarget.classList.add('submited');   നിങ്ങളുടെ വീഴ്ചഫോം മൂല്യനിർണ്ണയ ഫംഗ്ഷൻ });

നിങ്ങൾ ഉപയോഗിക്കുന്ന കൃത്യമായ സ്ക്രിപ്റ്റ് വ്യത്യസ്തമായിരിക്കും, എന്നാൽ നിങ്ങൾ എന്തു തന്നെ ചെയ്യുന്നുവെങ്കിലും, ഫോം എലമെൻറുകൾ ശൈലിയിലേക്ക് നിങ്ങൾക്ക് ഉപയോഗിക്കാം:

.സമര് പ്പിച്ച ഇന് പുട്ട്:അസാധുവായ + ലേബല് :::ശേഷം { content: ' ⨉'; }

ചിത്രം 3 ഇതിന്റെ ഔട്ട്പുട്ട് കാണിക്കുന്നു, നിങ്ങൾക്ക് ലൈവ് ഉദാഹരണം കാണാം.

ഈ ഉദാഹരണത്തെക്കുറിച്ച് ശ്രദ്ധിക്കേണ്ട രണ്ട് കാര്യങ്ങൾ: ആദ്യം, എന്റെ സ്വന്തം ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുന്നതിനായി, സബ്മിറ്റ് ബട്ടണിലെ നോവാലിഡേറ്റ് ആട്രിബ്യൂട്ട് ഉപയോഗിച്ച് ഞാൻ ഫോ ം സ്വയം വാലി ഡേറ്റ് ചെയ്യുന്നത് തടഞ്ഞിരിക്കുന്നു; ഒപ്പം രണ്ടാമതായി, ഫയർഫോക്സ് അവയുടെ വാലിഡേഷൻ അവസ്ഥയെ അടിസ്ഥാനമാക്കി ഘടകങ്ങൾക്ക് ചുറ്റും ഒരു നിറം മങ്ങിയ തിളക്കം വയ്ക്കുന്നു, അവയുടെ കുത്തക (-moz-ui-invalid selector) ഉ പയോഗിച്ച് ഞാൻ ഓവർ- ഭരണം നടത്തി. ഇവ എങ്ങനെ യാണ് ഉപയോഗിക്കുന്നതെന്ന് കാണുന്നതിന് ഡെമോയുടെ ഉറവിടം കാണുക.

നമ്പർ പരിധികൾ

നമ്പർ പോലുള്ള പുതിയ ഇൻപുട്ട് ടൈപ്പുകളിൽ ച ിലത്, മ ിൻ, മാക്സ് ആട്രിബ്യൂട്ടുകൾ ഉപയോഗിച്ച് മൂ ല്യങ ്ങളുട െ ഒര ു ശ്രേണി അനുവദിക്കുന്നു:

<input type="number" max="10" min="1">

സാധാരണയായി ഫോം നിയന്ത്രണങ്ങൾ ഉപയോക്താവിനെ ഈ പരിധിക്ക് പുറത്ത് ഒരു മൂല്യം നൽകുന്നതിൽ നിന്ന് തടയുമെങ്കിലും, ഇൻപുട്ടിന് നൽകിയിരിക്കുന്ന മൂല്യം പരിധിയെ ക്കാൾ കൂടുതൽ സന്ദർഭങ്ങളിൽ (മൂല്ല്യങ്ങൾ നൽകുന്നതിന് ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കുമ്പോൾ) സന്ദർഭങ്ങൾ ഉണ്ടായേക്കാം:

<input type="number" max="10" min="1" value="11">

ഇങ്ങനെ സംഭവിക്കുമ്പോൾ, നിങ്ങളുടെ സ്റ്റൈലിംഗിന് ഔട ്ട്-ഓഫ്-റേഞ്ച് സ്യ ൂഡോ ക്ലാസ്സ് നിങ്ങൾക്ക് ഉപയോഗിക്കാവുന്നതാണ്:

input[type='number']:out-of-range { border-color: red; }

നിങ്ങൾ പ്രതീക്ഷിക്കുന്നത് പോലെ, ഒരു പ്രതിരൂപമുണ്ട്: ഇൻ-റേഞ്ച് എന്ന പേരിൽ അറിയപ്പെടുന്ന ഒരു പ്രതിരൂപമുണ്ട ്:

input[type='number']:in-range { border- color: green; }

ചിത്രം 4-ൽ നിങ്ങൾക്ക് ഈ രണ്ട് വ്യാജ ക്ലാസുകൾ ജോലി യിൽ കാണാൻ കഴിയും, പിന്നെ യും ഒരു ലൈവ് ഉദാഹരണം കാണാം.

വായനയും എഴുത്തും

ടെക്സ്റ്റ് ഏരിയയിലെ നിബന്ധനകളും നിബന്ധനകളും പോലെ, ഉപയോക്താവിന് ചിട്ടപ്പെടുത്താൻ കഴിയാത്ത മൂല്യം മുൻകൂട്ടി പൂരിപ്പിച്ചഒരു ഫോം ഫീൽഡ് നിങ്ങൾക്ക് ഉണ് ടായേക്കാ ം. അങ്ങനെയാണെങ്കിൽ, നിങ്ങൾക്ക് റീഡ് ഒൺലി ആട്രിബ് യൂട്ട് ചേർ ക്കാവുന്നതാണ്:

<textarea readonly="">ലോറെം ഇപ്സം</textarea>

റീഡ് ഒൺലി ആട്രിബ്യൂട്ട് പ്രയോഗിച്ചിട്ടുള്ള എലമെന്റ ുകൾ നിങ്ങൾ ക്ക് സ്റ്റൈൽ ചെയ്യാം, ഉപയോഗിച്ച്… ഊഹിക്കാന് കഴിയുമോ? നിങ്ങൾ ശരിയാണ്, സങ്കല്പിച്ചുവായിക്കുന്ന വായനക് കാരൻ: വായിക്ക ാവുന്ന തൂലികാനാമം. ടെക്സ്റ്റ് തിരഞ്ഞെടുക്കാൻ ഉപയോക ്താവിനെ തടയാ ൻ ഉപയോക്താവ് തിരഞ്ഞെടുത്ത CSS പ്രോപ്പർട്ടിയുമായി നിങ്ങൾക്ക് സംയോജിപ്പിക്കാം (ഉദാഹരണത്തിൽ, കൂടുതൽ വ്യക്തതവരുത്തുന്നതിനായി ഞാൻ അതിർത്തി ശൈലി മാറ്റിയിട്ടുണ്ട്):

textarea:read-only { user-select: none; }

നിങ്ങൾക്ക് വേണമെങ്കിൽ, ആട്രിബ്യൂട്ട് പ് രയോഗിക്കാത ്ത ഘടകങ്ങൾക്ക് ഒരു "റീഡ്-റൈറ്റ് സ്യൂഡോ-ക്ലാസ്സ്" ഉണ്ട്:

textarea:read-write { user-select: text; }

ചിത്രം 5-ൽ നിങ്ങൾക്ക് ഫലങ്ങൾ കാണാൻ കഴിയും, അതിനു മുൻപും ഒരു ലൈവ് ഉദാഹരണം ഉണ്ട്.

ഫയർഫോക്സും IE10-ഉം യഥാർത്ഥത്തിൽ റീഡ്ഒൺലി ആട്രിബ്യൂട്ട് നടപ്പിലാ ക്കിയിട്ടുണ്ട്, എന്നാൽ ഈ വ്യാജ ക്ലാസുകൾക്ക് ഇതുവരെ പിന്തുണ ലഭിച്ചിട്ടില്ല.