Lomakkeita tuotetaan www-sivulle HTML-elementeillä ja lomakkeiden lomakekenttiin kirjoitettuja tietoja käsitellään
ohjelmointikielillä (esim PHP) toteutetuilla algoritmeillä ja funktioilla.
JavaScript:llä voidaan tarkistaa onko jokin lomakekenttä tyhjä sekä antaa tyhjästä kentästä ilmoitus www-sivulla
(onnistuu PHP:lläkin).
Täyttämättömästä lomakekentästä annetaan allert-ilmoitus:
JavaScript-koodaus, sijoita head-elementissä script-elementtiin:
<script>
function tarkistaEmail() {
var x = document.forms["omaEmail"]["email"].value;
if (x == "") {
alert("Oma email puuttuu. Ole hyvä, anna email.");
return false;
}
}
</script>
HTML-koodaus, sijoita haluamaasi kohtaan www-sivun koodaukseen:
<form name="omaEmail" action="/lomakefunktio.php" onsubmit="return tarkistaEmail()" method="post">
eMail: <input type="text" name="email">
<input type="submit" value="Lähetä">
</form>
Jätä lomakekenttä tyhjäksi ja paina Lähetä-painiketta:
Lomake-kentällä voidaan asettaa minimi ja maksimiarvo sekä annettu arvo voidaan tarkistaa tai ilmoittaa kentän olevan tyhjä.
Esimerkissä lomakekenttään hyväksytään arvoksi 100 - 200. jos arvo on ali tai yli, siitä ilmoitetaan tai jos kenttä on jätetty
tyhjäksi annetaan siitäkin ilmoitus:
Testaa seuraavasti: 1. Paina OK 2. Anna kentään numero-arvo 100 - 200 ja paina OK
Esimerkin CSS-ohjeet ja HTML-koodaus:
CSS-ohjeet:
.variRED{
color: RED;
}
.variBLUE{
color: BLUE;
}
.variGREEN{
color: GREEN;
HTML- ja JS-koodaukset:
<pre class="variGREEN"> Testaa seuraavasti:
1. Paina OK
2. Anna kentään numero-arvo 100 - 200 ja paina OK </pre>
<input id="rajat" type="number" min="100" max="200" required>
<button onclick="tarkistaKentta()"> OK </button>
<p class="variRED" id="arvot"> </p>
<script>
function tarkistaKentta() {
var syote = document.getElementById("rajat");
if (!syote.checkValidity()) {
document.getElementById("arvot").innerHTML = syote.validationMessage;
} else {
document.getElementById("arvot").innerHTML =
"<p class='variBLUE'> Valittu arvo sallituissa rajoissa ! </p>";
}
}
</script>
Asetuksia valittujen arvojen ilmaisuihin (DOM):
| Asetus | Selite, arvot tosi .. |
|---|---|
validity | jos käyttäjän viesti kelvollisesti asetettu |
validationMessage | jos elementin arvot eivät ole saman tyyppisiä kuin asetetulla atribuutilla |
willValidate | jos elementin arvo on suurempi kuin asetettu maksimiarvo |
Taulukon, yllä, asetusten sijainti JS-koodauksessa, esimerkki:
document.getElementById("arvot").innerHTML = syote.validationMessage;
Metodeita kelvollisten arvojen tutkimiseen:
| Metodi | Selite, arvot tosi .. |
|---|---|
customError | jos käyttäjän viesti kelvollisesti asetettu |
patternMismatch | jos elementin arvot eivät ole saman tyyppisiä kuin asetetulla atribuutilla |
rangeOverflow | jos elementin arvo on suurempi kuin asetettu maksimiarvo |
rangeUnderflowt | jos elementin arvo on pienempi kuin asetettu minimiarvo |
stepMismatch | jos elementin arvo ei ole sopivin askelein valittu |
tooLong | jos elementin arvo ylittää maxLength-atribuutin arvon |
typeMismatch | jos elementin arvo on väärän tyyppinen |
valueMissing | jos elementillä ei ole vaadittua arvoa |
valid | jos elementillä on vaadittu arvo |
Lomake-kentään, input-elementille voidaan asettaa (esimerkit):
minimi- ja maksimiarvo (min="100" max="200"),
minimiarvo (min="20") tai
maksimiarvo (max="120").
Lomakekenttä hyväksyy 50 tai suurempia lukuja, kokeile numeroarvoilla:
Esimerkin HTML- ja JS-koodaus (CSS-ohjeet samat kuin edellisessä esimerkissä):
HTML- ja JS-koodaukset:
<p class="variBLUE">
Lomakekenttä hyväksyy 50 tai suurempia lukuja, kokeile numeroarvoilla:
</p>
<input id="arvo1" type="number" min="50">
<button onclick="onkoSuurempi()"> OK </button>
<p id="tulosA"> </p>
<script>
function onkoSuurempi() {
var ilmoitus = "";
if (document.getElementById("arvo1").validity.rangeUnderflow) {
ilmoitus = "<p class='variRED'> Antamasi arvo on liian pieni, anna uusi arvo. </p>";
} else {
ilmoitus = "<p class='variGREEN'> Annoit sopivan arvon. </p>";
}
document.getElementById("tulosA").innerHTML = ilmoitus;
}
</script>
Esimerkissä (yllä) voi ilmoitus-muuttujien kohdalla käyttää esimerkiksi funktio-kutsuja tai sijoittaa muuttujiin CSS-muotoilut ilmoitukset.
JavaScript:llä on mahdollista tutkia onko lomakekenttä tai -kentät täytetty ennen kuin lomakkeen tiedot lähetetään www-palvelimella olevalle
ohjelmalle.
Esimerkissä sijoitetaan form-lomake, CSS-ohje ja JavaScript koodaus www-sivun koodaukseen sekä PHP-tiedosto jolle lomake lähettää
lomakkeen tiedot www-palvelimelle:
Esimerkin www-sivulle tarvittava CSS-ohjeet sekä HTML- ja JavaScript.koodaukset:
CSS-ohje:
.variBLUE{
color:BLUE:
}
HTML- ja JS-koodaus:
<form id="paluu" name="omaLomake" action="LOMAKE/lomakeTESTI.php" onsubmit="return tarkistaLomake()" method="post">
<span class="variBLUE">Etunimi:</span> <input type="text" name="eNimi">
<input type="submit" value="LÄHETÄ">
</form>
<script>
function tarkistaLomake() {
var etunimi = document.forms["omaLomake"]["eNimi"].value;
if (etunimi == "") {
alert("Etunimi puuttuu, anna etunimesi");
return false;
}
}
</script>
Esimerkki-koodaus lähettää etunimi-tiedon PHP-tiedostolle (lomakeTESTI.php) jonka koodaus on alla:
<!DOCTYPE HTML>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">
<title>TESTISIVU
<style>
body{
background-color: #505050;
color: yellow;
}
.container {
position: sisalto;
}
.ilmoitus {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
font-size: 18px;
}
</style>
</head>
<body>
<div class="sisalto">
<div class="ilmoitus">
<p>Lähetit JavaSScript-oppaan lomakkeella tietoja PHP-ohjelmaan www-palvelimelle.<p>
Etunimi: <?php echo $_POST["eNimi"]; ?> <br>
<p> Kiitos yhteydenotostasi.<br> Otamme pikaisesti yhteyttä sinuun.<br>
(ilmoitus sulkeutuu automaattisesti 4 sekunnin kuluttua)</p>
</div>
</div>
<script type="text/javascript">
(function(){
setTimeout(function(){
window.location="http://tietokanta.edu.hel.fi/opetus/opiJS/sivu10.html#paluu";
},4000); /* 1000 = 1 second*/
})();
</script>
</body>
</html>