E-Mail Validatie HTML/Javascript

[Graggor]

Sinds een tijdje ben ik begonnen met een projectje om weer te beginnen met html/php.
Ik kreeg een opdracht van mijn stagebegeleider om een gastenboek te maken met behulp van Twitter Bootstrap.

Opzich is dit niet zo heel moeilijk, maar mijn probleem is de e-mail validatie.
Wat ik graag zou willen is dat als ik een e-mail adres invoer, en ik ga naar het volgende veld. Dat het adres gecontroleerd word en er eventueel een vinkje of een kruisje naast komt te staan.
Zelf heb ik bijna geen ervaring met javascript en dergelijke dus ik besloot rond te gaan zoeken op het internet.

Na een tijdje speuren op google heb ik de volgende website gevonden:
http://www.w3resource.com...form/email-validation.php

Het script wat hier op staat werkt opzich goed, er zijn echter een paar nadelen.

1. Je moet op een knop drukken voordat hij begint met controleren.
2. Er komt een pop-up te voorschijn. Pop-ups vind ik zelf verschrikkelijk irritant, dus dit is voor mij helemaal geen optie.
3. Toen ik dit script in mijn code zette en het probeerde aan te passen zodat hij zou werken met onBlur, deed deze of niks, of hij bleef maar pop-ups te voorschijn toveren.

Wat ik graag zou willen weten is hoe ik het dus voor elkaar kan krijgen dat ik:

• Een of meerdere velden kan laten controleren (door middel van javascript).
• Een vinkje of een andere (kleine) wijziging kan laten zien op de pagina als de velden kloppen (of juist niet)
• Ervoor kan zorgen dat de Submit knop pas ingedrukt kan worden als alle velden goed zijn.

Als iemand dit aan mij zou kunnen uitleggen of een goede tutorial hiervoor heeft/weet, dan word dit zeer gewaardeerd!

Alvast bedankt voor jullie reacties en hulp!


Edit:

Het kale formulier staat HIER.

[ Voor 3% gewijzigd door Graggor op 06-04-2012 14:47 . Reden: Link toegevoegd ]

[NMe]

Domweg een onblur-eventhandler maken op de e-mailinput en daarin je validatie doen. Wat je fout hebt gedaan durf ik niet te zeggen, maar ik weet wel dat de code op die site nogal brak is. De snelste (maar minst cleane) oplossing zou zijn om iets als dit te doen:

HTML:

<input type="text" onblur="if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(myForm.emailAddr.value)) { document.getElementById('statusveld').innerHTML = 'Goed!' } else { document.getElementById('statusveld').innerHTML = 'Fout!' }" />
<span id="statusveld"></span>

Let wel, dat is de quick & dirty manier. Gezien het feit dat je zelf aangeeft niet veel van javascript te weten zal ik je de nette manier even besparen.

Daarnaast krijg je geen popups maar alertboxes met dat script, maakt nogal verschil.

[Walance]

Die e-mail validatie kun je bijvoorbeeld gewoon met een regulair expression doen, die zijn er genoeg te vinden op internet.

De rest is wel heel basis javascript en kun je op verschillende manieren doen. Je kunt bijvoorbeeld de vinkjes en foutmeldingen al op de pagina zetten en deze d.m.v. css standaard laten verbergen. Vervolgens valideer je met javascript een veld en maakt je daarna óf het vinkje, óf de foutmelding/ het kruisje zichtbaar.

Knoppen kun je heel makkelijk op disabled zetten met javascript... dat kun je heel makkelijk vinden als je 5 seconden Google gebruikt.

[Herko_ter_Horst]

Walance schreef op vrijdag 06 april 2012 @ 14:55:
Die e-mail validatie kun je bijvoorbeeld gewoon met een regulair expression doen, die zijn er genoeg te vinden op internet.

... en ze voldoen geen van allen aan de spec.

[brtk]

misschien kan je hier nog wat ideetjes uit opsnorren;

http://www.the-art-of-web.com/html/html5-form-validation/

[NMe]

Herko_ter_Horst schreef op vrijdag 06 april 2012 @ 14:57:
[...]

... en ze voldoen geen van allen aan de spec.

Ach, ik denk niet dat er iemand over valt dat "28;=bghasd%@123.45.67.89 niet correct als geldig mailadres geparsed wordt. 99,9999% van alle mailadressen zal met de simpelste regular expressions wel matchen, dus om daar nu moeilijk over te doen richting een gebruiker die duidelijk nog niet veel van javascript of regular expressions weet is misschien wat flauw.

[Bosmonster]

Herko_ter_Horst schreef op vrijdag 06 april 2012 @ 14:57:
[...]

... en ze voldoen geen van allen aan de spec.

Hoeft ook niet. Het is maar een grove validatie, dat het lijkt op een e-mailadres meestal. E-mailadressen op de letter volgens spec gaan controleren is redelijk zinloos.

[OkkE]

Bosmonster schreef op vrijdag 06 april 2012 @ 15:01:
[...]

Hoeft ook niet. Het is maar een grove validatie, dat het lijkt op een e-mailadres meestal. E-mailadressen op de letter volgens spec gaan controleren is redelijk zinloos.

Eens. Simpele regex werkt in veel gevallen prima (of soms voldoet type=email zelfs). Wil je echt zeker weten dat het een geldig adres is zou ik een e-mail met bevestiging link sturen.

[NMe]

OkkE schreef op vrijdag 06 april 2012 @ 15:52:
[...]

Eens. Simpele regex werkt in veel gevallen prima (of soms voldoet type=email zelfs). Wil je echt zeker weten dat het een geldig adres is zou ik een e-mail met bevestiging link sturen.

Ik valideer in javascript en aan de serverkant, en vervolgens check ik ook nog eens eerst het MX-record voordat ik überhaupt een mailtje verstuur.

[Barryvdh]

Als je het heel simpel wil doen kan je natuurlijk gewoon de HTML5 validatie gebruiken. Bootstrap styled die vakken ook uit zichzelf al anders (groen/groen=goed, rood=fout; http://bootstrap.fruitcakesites.nl/docs/base-css.html#forms)
Nadeel is dat het alleen in moderne browsers werkt, maar dat kan je opvangen door een fallback naar javascript, bijvoorbeeld: http://afarkas.github.com/webshim/demos/demos/webforms.html
Alleen de shim aanroepen voor forms, en je kan html5 style formulieren gebruiken, dus zoiets:

code:

<input type="email" name="email" id="email"  placeholder="Uw emailadres" required/>

Geeft bij mij in netjes een rode kleur als het nog niet goed is, en als ik wil verzenden voordat alles goed is, een melding bij het goede vakje, dat het niet geldig is of niet ingevuld is. Alleen bij IE geen kleurtjes, maar wel de melding dat je dat nog moet invullen.

[ Voor 5% gewijzigd door Barryvdh op 06-04-2012 17:47 ]

[Graggor]

Bedankt voor alle reacties en tips, ik zal kijken of ik eruit kom!