Kodulehe loomine, 11. kord

Vormi sisendid ja nende erinevad olekud

Tavapäraselt on vormidel kohustuslikud väljad, ilma neid välju täitmata ei ole võimalik vormi infot edastada. Selleks tuleb vastavate sisendandmete juurde lisada tingimuse required:

<input class="andmed" id="epost" type="email" name="epost" title="E-posti aadress" placeholder="Sisestage palun oma e-posti aadress" required><br>

Lisaks on võimalik muuta vormi elemente mitteaktiivseks, lisades oleku disabled:

<input class="nupp" id="edasta" type="submit" value="Edasta" disabled>

Veebilehitseja pool kontrolli tegemiseks saab kasutada JavaScript’i. Selleks, et kontrollida, kas e-posti aadress vastab etteantud reeglitele, saab kasutada JavaScript’i funktsiooni checkValidity() järgmiselt:

1. esmalt lisama html-koodi sisse eraldi osa JavaScript’i jaoks:

<script>
</script>

2. seejärel tekitame uued konstandid:

const epost = document.getElementById('epost');
const edasta = document.getElementById('edasta');

3. järgmisena omistame muutujale epost_sobib funktsiooni checkValidity() tulemuse:

epost_sobib = epost.checkValidity();

4. selleks, et see kontroll toimiks juba e-posti aadressi sisestamisel, kontrollime e-posti aadressi vastavust sel ajal, kui kasutaja andmeid sisestab, lisades jälgija andmete sisestamisele:

epost.addEventListener('keyup', function (event) {

});

5. sõltuvalt sellest, kas e-posti aadress vastab etteantud tingimustele või mitte, aktiveerimine nt andmete edastamise nupu (mis oli meil vormil esialgu mitteaktiivne, st disabled):

if (epost_sobib) 
{
  edasta.disabled = false;
} 
else 
{
  edasta.disabled = true;
}

Ja kogu eelnev kood kokku:

<script> 

const epost = document.getElementById('epost');
const edasta = document.getElementById('edasta');

epost.addEventListener('keyup', function (event) {
  epost_sobib = epost.checkValidity();
  if (epost_sobib) 
  {
    edasta.disabled = false;
  } 
  else 
  {
    edasta.disabled = true;
  }
});

</script>

Kui on soov kontrollida mitme andmevälja vastavust, siis seda saab teha järgnevalt:

1. lisada info selle kohta, et väljad on kohustuslikud, required, ja aktiveerida funktsioon kontrolli, kui sisendväljad kaotavad fookuse onblur=”kontrolli();”:

<input class="andmed" id="nimi" type="text" name="nimi" placeholder="Sisestage palun oma nimi" required onblur="kontrolli();"><br>
<input class="andmed" id="epost" type="email" name="epost" title="E-posti aadress" placeholder="Sisestage palun oma e-posti aadress" required onblur="kontrolli();"><br>

2. lisada JavaScript’i funktsioon kontrolli järgmiselt (kontrollides seda, et nimevälja pikkus oleks vähemalt 1 sümbol ja e-posti aadress vastaks nõuetele):

function kontrolli()
{
  var epost = document.getElementById('epost');
  var nimi=document.getElementById('nimi').value; 
  pikkus=nimi.length;

  if (epost.checkValidity() && pikkus>0)
  {
      edasta.disabled=false;
  }
  else
  {
     edasta.disabled=true;
  }
}

Lisaks on võimalik kujundada ka stiili, vastavalt sellele, kas sisestatud andmed on nõuetekohased või mitte:

#epost:invalid
{
border: 2px solid red;
}
#epost:empty, #epost:valid
{
border: 1px solid black;
}