Keskustelu: Nettisivujen teko: Lomakkeen tarkitus javascriptillä

Olen yrittänyt tehdä lomakkeen tarkituksen. Funktiota "tarkista" kutsutaan painettaessa lomakkeen lähetysnappia.
Koodi toimii, jos sähköpostikenttä on tyhjä tai ei sisällä kelvollista sähköpostiosoitetta. Jos sähköpostikentässä on kelvollinen sähköpostiosoite, niin muutkin kentät voivat olla tyhjiä ilman, että sivu siitä valittaa. Miksi?

function tarkista() {
	var email = document.getElementById('email').value;
	var atpos = email.indexOf("@");
	var dotpos = email.lastIndexOf(".");
	if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length) {
		alert("Ole hyvä ja kirjoita kelvollinen sähköpostiosoite");
	}
	var name = document.getElementById('name').value;
    if (name == "") {
        alert("Ole hyvä ja kirjoita nimesi");
    }
	var yhdistys = document.getElementById('yhdistys').value;
	if (yhdistys == "") {
        alert("Ole hyvä ja kirjoita yrityksesi/yhdistyksesi nimi");
    }
	var address1 = document.getElementById('address1').value;
	if (address1 == "") {
        alert("Ole hyvä ja kirjoita osoitteesi");
    }
}

Muuttuja x on määrittelemätön, joten viittaus x.length aiheuttaa virheen, joka aiheuttaa funktion suorituksen katkeamisen.

Koodista ei ilmene, mitä testi dotpos+2>=x.length yrittää tarkistaa, joten en tiedä, miten kohta pitäisi korjata.

Jatkossa kannattaa tällaisissa kysymyksissä esittää myös HTML-koodi ja mielellään osoite, jossa koodi on suoraan testattavissa.

Virhe tosiaan oli siellä.

Tuo sähköpostin tarkitus on täältä. Vaihdoin x:t parempaan nimeen, mutta tuo yksi näköjään unohtui.

Virheiden etsintä kannattaa yleensä aloittaa selaimen kehittäjätyökalujen virhekonsolista. Tällaiset kirjoitus- ja nimeämisvirheet näkyvät sieltä helposti aloittelijallekin.

Omien JS-tarkistusfunktioiden virittely on vanhanaikaista ja virhealtista. Mielestäni nykyään kannattaa käyttää HTML5:n ominaisuuksia (type="email", required="required" ja tarvittaessa pattern="lauseke") ja tarvittaessa jotain valmista JS-kirjastoa, joka toteuttaa ne vanhemmille selaimille tai tyylittelee virheilmoitukset mielen mukaan.

http://html5pattern.com/

Metabolix kirjoitti:

Omien JS-tarkistusfunktioiden virittely on vanhanaikaista ja virhealtista. Mielestäni nykyään kannattaa käyttää HTML5:n ominaisuuksia (type="email", required="required" ja tarvittaessa pattern="lauseke") ja tarvittaessa jotain valmista JS-kirjastoa, joka toteuttaa ne vanhemmille selaimille tai tyylittelee virheilmoitukset mielen mukaan.

Periaatteessa kyllä, mutta käytännössä meiliosoitekentän tarkistuksen tärkein hyöty on, että huomataan ajoissa, jos käyttäjä on kirjoittanut kenttään esimerkiksi nimensä tai kengännumeronsa. Siksi se, että tarkistetaan, että mukana on @-merkki, ratkaisee vähintään 80 % ratkaistavissa olevista ongelmista. Tämän koodaaminen itse ei välttämättä ole tyhmää. Onhan valtaosa sähkäpostiosoitteen tarkistamisen valmiista koodeista tuplasti virheellisiä: hylkää oikeita osoitteita ja hyväksyy vääriä. Siksi voi olla ihan fiksua tehdä oma erittäin simppeli koodi (mielellään simppelimpi kuin kysymyksessä!), joka ei hylkää mitään kelvollista (vaikka päästää läpi paljon kelvotonta). Eihän ole olemassa mitään algoritmista tapaa tarkistaa, onko annettu osoite toimiva. (Lähimmäksi pääsee koodilla, joka lähettää osoitteeseen testiviestin, mutta silloinkin jäädään aika kauas varmistamisesta.)

HTML5:n mukaisesta type="email" merkinnästä on muitakin hyötyjä. Esimerkiksi kännykkäselain voi vaihtaa kyseisen kentän kohdalla näppäimistöleiskaa niin, että piste ja @ ovat suoraan esillä.

Onko jossain selaimessa tosiaan niin virheellinen sähköpostiosoitteen tarkistus, että on parempi viritellä itse?

Yucca kirjoitti:

Siksi se, että tarkistetaan, että mukana on @-merkki, ratkaisee vähintään 80 % ratkaistavissa olevista ongelmista. Tämän koodaaminen itse ei välttämättä ole tyhmää.

Jos olisikin niin, että selainten valmiit tarkistukset olisivat viallisia, tämänkin voisi ”koodata” itse paljon yksinkertaisemmin ja selvemmin pattern-attribuutilla.

Voihan siihen laittaa email ja lisäksi tehdä tarkistuksen mahdollisia sellaisia selaimia varten, jotka eivät email tyyppiä ymmärrä vaan tekevät normaalin tekstikentän.