Erilaisia lomakevalidaattoreita löytyy pilvin pimein ja ne ovat toinen toistaan monipuolisempia. Kun tarvitset jotain yksinkertaista, tässä on kätevä jQuery-skripti joka tarkistaa, että kaikki vaaditut tekstikentät ovat täytetyt. Alla on esimerkkilomake ja validointiskripti (jQuery 1.3).

XHTML

<form>
<p>Nimi* <input type="text" class="required" /></p>
<p>Sähköposti* <input type="text" class="required" /></p>
<p>Puhelin <input type="text" /></p>
</form>

Yllä on pelkistetty mallilomake. Huomaa, että vaadituille kentille määritellään class=”required”. Skripti tarkistaa kentät, joille kyseinen class on asetettu.

JavaScript

$(function(){
    $('form').submit(function(){
        if (0 < $('.required:text:not([value])', this).length) {
            alert("Täytäpä kaikki vaaditut kentät.");
            return false;
        }
        return true;
    });
});

Kun lomake lähetetään, yllä oleva koodi tarkistaa, että vaaditut tekstikentät ovat täytetyt. Vaaditut kentät tunnistetaan required-classista. Jos jokin kenttä on täyttämättä lähetys keskeytetään ja näytetään huomautus.

Yllä käytetty alert() on helppo tapa näyttää virheilmoitus, mutta ei kovin havainnollinen saatika miellyttävä. Skriptiä hieman laajentamalla saadaan aikaiseksi havainnollisempi virheilmoitus.

Vaihtoehtoinen JavaScript

$(function(){
    $('form').submit(function(){
        $('.error-msg', this).remove();
        $('.error', this).removeClass('error');
        var notOK = $('.required:text:not([value])', this);
        if (0 == notOK.length)
            return true;
        notOK.each(function(){
            $(this).addClass('error').after('<span class="error-msg">Tämä kenttä on pakollinen.</span>');
        });
        return false;
    });
});

Laajennettu skripti lisää virhekentille classin “error” sekä näyttää kentän yhteydessä virheviestin. Lisää hieman CSS-tyylittelyä niin sinulla on todella selkeä ja toimiva lomake.