Rahinaa.biz / Lehti / Pieni jQuery aikaisempaan liittyen

Pieni jQuery aikaisempaan liittyen

Julkaistu: 19. maaliskuuta 2008 Kategoria: yleinen

Mainittuani sanan jQuery viime merkinnässä, voisin mainita pienen vinkin tähän js-kirjastoon liittyen. Aiheeksi voisimme ottaa input-elementin tekeminen tarvittavaksi, niin ettei lomaketta voi lähettää ilman sen täyttämistä. Tämä on myös todella simppeli, todella simppeli. Kaikkihan tämän osaavatkin.

XHTML, voi näyttää tältä:

<form type="post" action="">
	<input type="text" value="" name="nimi" id="nimi" />
	<input type="submit" value="Lähetä" />
</form>

Javascripti jossa käytämme jQueryä puolestaan näyttäisi tältä:

$(document).ready(function(){
	$("form").submit(function(){
		if ($("input#nimi").val() == "") {
			$("input#nimi").addClass("virhe");
			return false;
		} else {
			$("input#nimi").removeClass("virhe");
			return true;
		}
	});
});

Jos lomakkeen nimi-kenttä on jäänyt tyhjäksi lähetyshetkellä, ei lähettäminen onnistuu, vaan lomake ei lähde mihinkään. Vaan nimi-kenttään lisätään class="virhe" jolloin sen ulkoasuakin voi korostaa, muokkaamalla .virhe:ttä. Tietysti tähän kannattaa lisätä myös kentän vaadittavuus PHP/yms-koodissa, joka vastaa itse sivuston toimivuudesta, tämä on vain ihan efekti/muotoilu mielessä käytännöllinen.

Kommentointi suljettu [2] Tagit:

Petri kirjoitti 20. maaliskuuta 2008:

Kiitoppia näppärästä vinkistä. Tuota voisi oikeasti käytellä jossain yhteydessä. Toimintavarmempi ratkaisu tuollaisessa lomakkeentarkistuksessa olisi käyttää palvelimella suoritettavaa koodia, joka tulostaisi virheilmoitukset ja muut. Tämän JS-version vahvuutena näen sen, että ei ole kovin kummoista viivettä vastauksen (esim. virheilmoituksen) saamiseksi käyttäjän puolella lomakkeen lähetystä yritettäessä.

Gocom kirjoitti 21. maaliskuuta 2008:

No enkös minä sen merkinnässä juuri sanonut? :D Sehän siinä on tarkoituksena kuin merkinnässä lukee, ei tuo ole mihinkään toimintaa käytettävä, eikä ikinä tulisi ollakaan käytetty. Täysi idiootti validoi forminsa JS:llä. Ihan vain efektitarkoituksessa… huoh. Toisin sanoen saman koodin voi kirjoittaa sitten php:lla vaikka kuten esimerkiksi:

if($_POST['nimi'] == '') die('Tyhjä on tyhmää!');

Eihän tuo lomakekkaan tuollaisenaan tee mitään, vaan sen käsittelynkin tekee jokin muu maaginen olento.

Tämän bloggauksen kommentointi on suljettu, sen oltua auki 19. maaliskuuta 2008 lähtien kuusi viikkoa. Tuona aika merkintä sai 2 kommenttia. Merkinnän kestolinkki: http://www.rahinaa.biz/lehti/pieni-jquery-aikaisempaan-liittyen

Elämä on pääasiassa kahvia, taiteilua, ohjelmointia, musaa, tunteita, nauttimista, aurinkoa, kävelemistä, kokkaamista, elokuvia hitusella kauneutta, sekä vastakohtaista rumuutta.

© Copyright 2008 Jukka Svahn. All rights reserved. Sivun ylälaitaan