[JS] Empty validation in HTML form - Softwareontwikkeling

donderdag 24 april 2008 13:41

Acties:

Verwijderd

Topicstarter

Hallo allen,

Op de een of andere manier werkt mijn validation script niet meer.

JS van validation:

code:

function emptyvalidation(entered, alertbox)
{
// Emptyfield Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
if (value==null || value=="")
{if (alertbox!="") {alert(alertbox);} return false;}
else {return true;}
}
}

function emailvalidation(entered, alertbox)
{
// E-mail Validation by Henrik Petersen / NetKontoret
// Explained at www.echoecho.com/jsforms.htm
// Please do not remove this line and the two lines above.
with (entered)
{
apos=value.indexOf("@"); 
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2) 
{if (alertbox) {alert(alertbox);} return false;}
else {return true;}
}
}

function formvalidation(thisform)
{
with (thisform)
{
if (emailvalidation(Emailadres,"Het e-mailadres is geen geldig e-mailadres")==false) {Emailadres.focus(); return false;};
if (emptyvalidation(Abonneenummer,"Het veld abonneenummer is leeg")==false) {Abonneenummer.focus(); return false;};
if (emptyvalidation(Voorletters,"Het veld voorletters is leeg")==false) {Voorletters.focus(); return false;};
if (emptyvalidation(Roepnaam,"Het veld roepnaam is leeg")==false) {Roepnaam.focus(); return false;};
if (emptyvalidation(Achternaam,"Het veld achternaam is leeg")==false) {Achternaam.focus(); return false;};
if (emptyvalidation(Adres,"Het veld adres is leeg")==false) {Adres.focus(); return false;};
if (emptyvalidation(Huisnr,"Het veld huisnummer is leeg")==false) {Huisnr.focus(); return false;};
if (emptyvalidation(Postcode,"Het veld postcode is leeg")==false) {Postcode.focus(); return false;};
if (emptyvalidation(Plaats,"Het veld plaats is leeg")==false) {Plaats.focus(); return false;};
if (emptyvalidation(Telefoon,"Het veld telefoon is leeg")==false) {Telefoon.focus(); return false;};
if (emptyvalidation(Emailadres,"Het veld emailadres is leeg")==false) {Emailadres.focus(); return false;};
if (emptyvalidation(Geboortedatum,"Het veld geboortedatum is leeg")==false) {Geboortedatum.focus(); return false;};
if (emptyvalidation(Organisatie,"Het veld organisatie is leeg")==false) {Organisatie.focus(); return false;};
if (emptyvalidation(eind2,"U moet het eens zijn met de algemene voorwaarden")==false) {eind2.focus(); return false;};
if (emptyvalidation(training1,"U moet een eerste training kiezen")==false) {training1.focus(); return false;};
if (emptyvalidation(training2,"U moet een tweede training kiezen")==false) {training2.focus(); return false;};

if (emptyvalidation(FactuurVoorletters,"Het veld voorletters is leeg")==false) {FactuurVoorletters.focus(); return false;};
if (emptyvalidation(FactuurAchternaam,"Het veld achternaam is leeg")==false) {FactuurAchternaam.focus(); return false;};
if (emptyvalidation(FactuurAdres,"Het veld adres is leeg")==false) {FactuurAdres.focus(); return false;};
if (emptyvalidation(FactuurHuisnr,"Het veld huisnummer is leeg")==false) {FactuurHuisnr.focus(); return false;};
if (emptyvalidation(FactuurPostcode,"Het veld postcode is leeg")==false) {FactuurPostcode.focus(); return false;};
if (emptyvalidation(FactuurPlaats,"Het veld plaats is leeg")==false) {FactuurPlaats.focus(); return false;};
if (emptyvalidation(FactuurTelefoon,"Het veld telefoon is leeg")==false) {FactuurTelefoon.focus(); return false;};
}
}

Script van het formulier:

code:

<table cellpadding="0" cellspacing="2" border="0">
<form method="post" action="verzenden.php" onsubmit="return formvalidation(this)">
<tr>
<td width="100px" align="right" style="padding-right:10px"><strong>Personalia</strong>
</td>
<td width="100px" colspan="3">&nbsp;
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">&nbsp;
</td>
<td width="100px" colspan="3"><input type="radio" name="geslacht" value="Dhr" />Dhr&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="geslacht" value="Mevr" />Mevr<br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Voorletters*<br />
</td>
<td width="100px" colspan="3"><input type="text" name="Voorletters" class="lang" onchange="emptyvalidation(this,'Het veld voorletters is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Roepnaam*<br />
</td>
<td width="100px" colspan="3"><input type="text" name="Roepnaam" class="lang" onchange="emptyvalidation(this,'Het veld roepnaam is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Tussenvoegsel<br />
</td>
<td width="100px" colspan="3"><input type="text" name="Tussenvoegsel" class="lang"/><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Achternaam*<br />
</td>
<td width="100px" colspan="3"><input type="text" name="Achternaam" class="lang" onchange="emptyvalidation(this,'Het veld achternaam is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Geboortedatum*<br />
</td>
<td width="100px" colspan="3"><input type="text" name="Geboortedatum" class="lang" onchange="emptyvalidation(this,'Het veld geboortedatum is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Hoogstgenoten Opleiding<br />
</td>
<td width="100px" colspan="3"><input type="radio" name="opleiding" value="HBO" />HBO&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="opleiding" value="WO" />WO<br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Afstudeerdatum<br />
</td>
<td width="100px">
<select name="maand">
<option value="januari">januari</option>
<option value="februari">februari</option>
<option value="maart">maart</option>
<option value="april">april</option>
<option value="mei">mei</option>
<option value="juni">juni</option>
<option value="juli">juli</option>
<option value="augustus">augustus</option>
<option value="september">september</option>
<option value="oktober">oktober</option>
<option value="november">november</option>
<option value="december">december</option>
</select>
</td>
<td colspan="2">
<select name="jaar">
<option value="1984">1984</option>
<option value="1985">1985</option>
<option value="1986">1986</option>
<option value="1987">1987</option>
<option value="1988">1988</option>
<option value="1989">1989</option>
<option value="1990">1990</option>
<option value="1991">1991</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
<option value="1995">1995</option>
<option value="1996">1996</option>
<option value="1997">1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
<option value="2001">2001</option>
<option value="2002">2002</option>
<option value="2003">2003</option>
<option value="2004">2004</option>
<option value="2005">2005</option>
<option value="2006">2006</option>
<option value="2007">2007</option>
<option value="2008">2008</option>
<option value="2009">2009</option>
<option value="2010">2010</option>
</select>
</td>
</tr>
<tr>
<td colspan="4">&nbsp;
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px"><strong>Postadres</strong>
</td>
<td width="100px" colspan="3">&nbsp;
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">
Naam Organisatie<br />
</td>
<td width="100px"colspan="3">
<input type="text" name="Organisatie" class="lang" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Adres*<br />
</td>
<td width="100px"><input type="text" name="Adres" class="lang" onchange="emptyvalidation(this,'Het veld adres is nog leeg');" /><br />
</td>
<td width="70px" align="right" style="padding-right:10px">Huisnr.*<br />
</td>
<td width="50px"><input type="text" name="Huisnr" class="kort" onchange="emptyvalidation(this,'Het veld huisnummer is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Postcode*<br />
</td>
<td width="100px"><input type="text" name="Postcode" class="kort" maxlength="6" size="6" onchange="emptyvalidation(this,'Het veld postcode is nog leeg');" /><br />
</td>
<td width="70px" align="right" style="padding-right:10px">Plaats*<br />
</td>
<td width="50px"><input type="text" name="Plaats" class="lang" onchange="emptyvalidation(this,'Het veld plaats is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Telefoon*<br />
</td>
<td width="100px" colspan="3"><input type="text" name="Telefoon" class="lang" onchange="emptyvalidation(this,'Het veld telefoon is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Emailadres*<br />
</td>
<td width="100px" colspan="3"><input type="text" name="Emailadres" class="lang" onchange="emptyvalidation(this,'Het veld emailadres is nog leeg'); emailvalidation(this,'Het e-mailadres klopt niet');" /><br />
</td>
</tr>


<tr>
<td colspan="4">&nbsp;
</td>
</tr>
<tr>
<td colspan="4">&nbsp;
</td>
</tr>

<tr>
<td width="100px" align="right" style="padding-right:10px"><strong>Factuuradres</strong>
</td>
<td width="100px" colspan="3">&nbsp;
</td>
</tr>

<tr>
<td width="100px" align="right" style="padding-right:10px">
Naam Organisatie<br />
</td>
<td width="100px"colspan="3">
<input type="text" name="FactuurOrganisatie" class="lang" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Contactpersoon*
</td>
<td width="100px" colspan="3"><input type="radio" name="geslacht" value="ContactDhr" />Dhr&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="geslacht" value="ContactMevr" />Mevr<br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">
Voorletters*<br />
</td>
<td width="100px"colspan="3">
<input type="text" name="FactuurVoorletters" class="lang" onchange="emptyvalidation(this,'Het veld voorletters is nog leeg');"/><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">
Tussenvoegsel<br />
</td>
<td width="100px"colspan="3">
<input type="text" name="FactuurTussenvoegsel" class="lang" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">
Achternaam*<br />
</td>
<td width="100px"colspan="3">
<input type="text" name="FactuurAchternaam" class="lang" onchange="emptyvalidation(this,'Het veld achternaam is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Adres*<br />
</td>
<td width="100px"><input type="text" name="FactuurAdres" class="lang" onchange="emptyvalidation(this,'Het veld adres is nog leeg');" /><br />
</td>
<td width="70px" align="right" style="padding-right:10px">Huisnr.*<br />
</td>
<td width="50px"><input type="text" name="FactuurHuisnr" class="kort" onchange="emptyvalidation(this,'Het veld huisnummer is nog leeg');" /><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">Postcode*<br />
</td>
<td width="100px"><input type="text" name="FactuurPostcode" class="kort" maxlength="6" size="6" onchange="emptyvalidation(this,'Het veld postcode is nog leeg');"/><br />
</td>
<td width="70px" align="right" style="padding-right:10px">Plaats*<br />
</td>
<td width="50px"><input type="text" name="FactuurPlaats" class="lang" onchange="emptyvalidation(this,'Het veld plaats is nog leeg');"/><br />
</td>
</tr>
<tr>
<td width="100px" align="right" style="padding-right:10px">
Telefoon*<br />
</td>
<td width="100px"colspan="3">
<input type="text" name="FactuurTelefoon" class="lang" onchange="emptyvalidation(this,'Het veld telefoon is nog leeg');"/><br />
</td>
</tr>

<tr>
<td colspan="4">&nbsp;

</td>
</tr>

<tr>
<td colspan="4">
Graag wil ik de volgende twee trainingen volgen:
</td>
</tr>

<tr>
<td colspan="4">
Training 1*&nbsp;
<select name="training1" onchange="emptyvalidation(this,'Je moet een eerste training kiezen');" >
<option value="null"></option>
<option value="Balans in werk & leven">Balans in werk &amp; leven</option>
<option value="Het merk &#8220;IK&#8221;">Het merk &quot;IK&quot;</option>
<option value="Gelukkig in je werk">Gelukkig in je werk</option>
<option value="Denken in mogelijkheden">Denken in mogelijkheden</option>
<option value="Zelfbewust & effectief communiceren">Zelfbewust &amp; effectief communiceren</option>
<option value="Vergroot je leiderschap">Vergroot je leiderschap</option>
<option value="Resultaatgericht coachen">Resultaatgericht coachen</option>
</select>
</td>
</tr>

<tr>
<td colspan="4">
Training 2*&nbsp;
<select name="training2" onchange="emptyvalidation(this,'Je moet een tweede training kiezen');">
<option value="null"></option>
<option value="Balans in werk & leven">Balans in werk &amp; leven</option>
<option value="Het merk &#8220;IK&#8221;">Het merk &quot;IK&quot;</option>
<option value="Gelukkig in je werk">Gelukkig in je werk</option>
<option value="Denken in mogelijkheden">Denken in mogelijkheden</option>
<option value="Zelfbewust & effectief communiceren">Zelfbewust &amp; effectief communiceren</option>
<option value="Vergroot je leiderschap">Vergroot je leiderschap</option>
<option value="Resultaatgericht coachen">Resultaatgericht coachen</option>
</select>
</td>
</tr>

<tr>
<td colspan="4">&nbsp;

</td>
</tr>

<tr>
<td colspan="4">
* Let op: Er zijn beperkte plaatsen beschikbaar! 
</td>
</tr>

<tr>
<td colspan="4">
<input type="checkbox" name="eind1" value="Ja, nieuwsbrief van Harte & Lingsma ontvangen" checked="checked" />Ik wil graag de nieuwsbrief van Van Harte &amp; Lingsma ontvangen<br />
<input type="checkbox" name="eind2" value="Ja, akkoord met voorwaarden" checked="checked" onchange="emptyvalidation(this,'U moet het eens zijn met de algemene voorwaarden');" />Ik ga akkoord met de <a href="/mini-sites/Groeispurt/voorwaarden.html">voorwaarden</a> <br />
</td>
</tr>

<tr>
<td colspan="4">&nbsp;

</td>
</tr>

<tr>
<td colspan="4" align="right">
<input type="submit" value="Verstuur" />
</td>
</tr>

</form>
</table>

Het lijkt mij dat het gewoon moet werken. Kan iemand hier even naar kijken en mij helpen? Ik zie door de bomen het bos niet meer...

donderdag 24 april 2008 13:52

Acties:

crisp

Devver

Pixelated

JavaScript:

1	if (emptyvalidation(Abonneenummer,"Het veld abonneenummer is leeg")==false) {Abonneenummer.focus(); return false;};

geeft error: "Abonneenummer is not defined"

kortom: open je JS errorconsole eens...

Intentionally left blank

donderdag 24 april 2008 13:54

Acties:

Verwijderd

Topicstarter

Ah, die bestaat niet meer. Bedankt, nog een klein vraagje: Ik gebruik Dreamweaver als programma (typ wel alles handmatig) en maak eigenlijk alleen maar html dingen. scripting is dus bij hoge uitzondering. De vraag is, zit er ook zo'n errorconsole in Dreamweaver? (sorry als deze vraag dom klinkt)

donderdag 24 april 2008 14:13

Acties:

TeeDee

CQB 241

Ik zou in FireFox in combinatie met FireBug of de Webdev toolbar het betere debug werk doen.

Heart..pumps blood.Has nothing to do with emotion! Bored

donderdag 24 april 2008 14:47

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

crisp schreef op donderdag 24 april 2008 @ 13:52:
JavaScript:
1
if (emptyvalidation(Abonneenummer,"Het veld abonneenummer is leeg")==false) {Abonneenummer.focus(); return false;};
geeft error: "Abonneenummer is not defined"

kortom: open je JS errorconsole eens...

^^ Wat hij zegt. Daarbij wordt het op prijs gesteld als je enkel relevante code post en niet van dit soort huge ass lappen; daar heeft niemand zin in om naar te gaan zitten kijken. Verder zien we graag dat je zelf wat moeite doet (die zie ik nergens terug in je topicstart, die uit nog geen 3 zinnen en verder 350 regels code bestaat) en zijn we doorgaans ook niet erg blij met het debuggen van 'geleende' code; daarvoor kun je je beter wenden tot de originele auteur(s). En anders is het fijn als je op z'n minst even vermeldt wat er niet werkt; "Op de een of andere manier werkt mijn validation script niet meer" is nou niet echt een duidelijke omschrijving.

Kijk ook eens even onze Registratievoorwaarden / korte FAQ en Quickstart door

Tot slot, als ik toch met links aan 't strooien ben

, lees dan Kan iemand even...? ook nog even.

[ Voor 26% gewijzigd door RobIII op 24-04-2008 14:53 ]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 24 april 2008 14:50

Acties:

Verwijderd

Topicstarter

Sorry voor de lange lap script. Helaas is het origineel nog langer dus ik heb al geknipt voor relevante code. Wat ik heb neergezet is alleen de javascript en het formulier (waar dus overal de fout in kan zitten). Zoals ik ook heb aangegeven, dit formulier werkte eerst wel en het enige wat ik heb "geleent" is het stukje javascript. Deze heb ik vervolgens zo gemanipuleerd dat het aan mijn wensen voldeed.

Mijn excuses als ik hiermee tegen schenen heb geschopt. Ik ben helaas geen developer, maar doe wel mijn best om dit soort problemen op te lossen. Had ik eerder geweten van een javascript errorconsole dan was ik hier niet eens gekomen. Kortom, de beschuldiging die je plaatst vind ik niet terecht.

donderdag 24 april 2008 14:56

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Ik hoef geen excuses hoor, en met mijn schenen valt het wel mee

Ik zeg dit zodat je er van leert voor een volgende keer

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 24 april 2008 20:36

Acties:

_Thanatos_

Ja, en kaal

Als je toch bezig bent, haal dan ook die with-constructie eruit. Dat is ten eerste invalid, en in de browsers waar het werkt, werkt het nog steeds fouten in de hand. Je kunt nml niet zien of je een property van "thisform" pakt, of een global.

[ Voor 4% gewijzigd door _Thanatos_ op 24-04-2008 20:36 ]

日本！🎌