Keskustelu: Nettisivujen teko: Lomakkeen tarkistus, en vain osaa!

Hei,

vähän tälläinen tilauslomakkeen tyyppinen sivu tekeillä. Muutamia tekstikenttiä osoite yms. tietoja varten ja lopussa checkbox jolla hyväksytään toimitus ja tilausehdot.

Muuten homma toimii, en vain osaa tarkistaa että kaikki vaadittavat kentät ja checkbox on valittuna. Kokeillut niin miljoonaa juttua mutta aina jotain menee pieleen ja toimii väärin :G

Nykysilleen homma on näin:

        if (form.nimi.value == 0) {
                alert("Anna pyydetyt tiedot.");^M
                return false;
        } else if (form.osoite.value == 0) {
                alert("Anna pyydetyt tiedot.");
                return false;
        } else if (form.postinumero.value == 0) {
                alert("Anna pyydetyt tiedot.");
                return false;
        } else if (form.puhelin.value == 0) {
                alert("Anna pyydetyt tiedot.");
                return false;
        } else if (form.toimitusehdot.checked == false) {
                alert("Lue ja hyvaksy toimitusehdot.");
                return false;
        } else {
               if (form.toimitusehdot.checked == true);
                return;
                form.submit();
        }

Homma toimii osaksi. Scripti osaa kurkata että halutut tekstikentät ovat täytettynä, mutta checkboxin kanssa tulee ongelma. Jos sitä ei ole valittuna, niin se pyytää sen valitsemaan ja taas kun sen valitsee, ei tee mitään :o

Missä mennään vikaan? Ei varmaan iso ongelma korjata, mutta kun ei ymmärrä niin ei ymmärrä.

Korjausehdotuksen kanssa voisi antaa myös optimointivinkkejä? Siihen on nimittäin varmasti varaa!

               if (form.toimitusehdot.checked == true);
                return;

Tässä on if-lause, joka tekee tarkistuksen mutta ei suorita mitään (päättyy ;-merkillä).

Sen jälkeen tulee return, joka suoritetaan ihan aina ja funktiosta poistutaan välittömästi. Eli lomaketta ei koskaan lähetetä.

Muoks!
Mitä optimointiin tulee, kun lähes joka kerta annat saman virheilmoituksen, niin:

        if (!form.nimi.value
            || !form.osoite.value
            || !form.postinumero.value
            || !form.puhelin.value)
        {
                alert("Et ole antanut kaikkia pyydettyjä kenttiä.");
                return false;
        }

Myös virheilmoituksen tekstin muotoa voit miettiä hieman tarkemmin. Toisaalta voi myös miettiä seuraavaa:

var virheet = new Array();

if(!form.nimi.value) virheet.push('Et antanut nimeä.');
if(!form.osoite.value) virheet.push('Et antanut osoitetta.');
if(!form.postinumero.value) virheet.push('Et antanut postinumeroa.');
if(!form.puhelin.value) virheet.push('Et antanut puhelinnumeroa.');

// tarkista tapahtuiko virheitä
if (virheet.length) {
   alert( "Tapahtui seuraavat virheet:\n\n" + virheet.join("\n") );
   return false;
}

Virheentarkistus kattavamminkaan ei liene pahasta, mutta JavaScriptiä tärkeämpää on tarkistaa palvelimen puolella (olkoon siellä sitten PHP, ASP, JSP tai mikä tahansa), että annetut tiedot ovat varmasti oikeassa muodossa. JavaScript-tarkistus on vaan "kiva lisä".

Ehdotellaan nyt vielä valmista toolpackia validointiin, esim. jQuery plugin: Validation. Jotenkin vaan mulla tökkii nuo jQuery-validaattorit aika pahasti jostain syystä.

Kiitos merri <3