home  :: Home/Artikels/Webdesign enzo/Webdevelopment en scripting/Javascript formulier check

Javascript formulier check


door: JorisO 
javascript formulier controle

Javascript biedt onvoldoende beveiligingsmogelijkheden voor een grondige controle van gegevens die bezoekers in de html formulieren op je website invullen. Ingevulde formulieren moeten aan de server side nog eens worden doorgelicht om de simpele reden dat javascript aan client side kan worden omzeild/uitgeschakeld.

Javascript form checks bieden echter wel de mogelijkheid om direct tijdens het invullen feed-back te geven, zonder dat gegevens naar de server worden verstuurd. Javascript form checks dienen dan ook vnl usability - doeleinden. Desalnietemin nuttig dus en daarom hier een voorbeeld javascript formulier check die  n.a.v. een 'onsubmit event' alle elementen in het formulier doorloopt en een foutmelding alert wanneer een formulier veld leeg blijkt:

Javascript form check


De volgende javascript functie zet je in de <head> sectie van je html document: 
<script language="javascript">
function checkform(form) {
    for (var x=0; form.elements[x]; x++ ) {
        if (form.elements[x].value == ""){
            if(form.elements[x].id != "nocheck") {
            alert( "Vergeten het '" + form.elements[x].id + "' veld in te vullen?" );
            form.elements[x].focus();
            return false ;
            }
        }
    }       
}
</script>

Je roept de javascrip functie in je formulier aan d.m.v. bijv. een onsubmit check - deze plaats je dan in de openings-tag van je formulier <form>.
Als je niet wilt dat een <input> veld bij de submit gecheckt geef je hieraan als id waarde 'nocheck'.

Voorbeeld:

<form name="whatever" onsubmit="return checkform(this)">

Naam:<br />
<input type="text" name="naam" id="naam" />

Tussenvoegsel: <br />
<input type="text" name="tussenvoegsel" id="nocheck" />

Achternaam:<br />
<input type="text" name="achternaam" id="Achternaam" />

<input type="submit" value="verzenden">
</form>



Commentaar van bezoekers:
van: fgd
22:46:19, 19th-Apr-07
sdfgsdfg

van: Benoit
17:14:17, 17th-May-07
goed, uitgelegd maar hoe maak je eigenlijk zo'n gastenboekje zoals hieronder

van: pietje prik
16:48:08, 23rd-May-07
Voorbeeld gastenboek staat op link hierboven uitgelegd

van: mb
10:58:18, 14th-Aug-07
hoi. even testen

van: BadPriTT
14:45:28, 29th-Oct-07
Dit script werkt niet :( Form wordt toch doorgestuurd naar volgende pagina!

Code is onleesbaar btw, vele pgingen ondernomen voordat t lukte.. :(

van: lanpoe
19:44:39, 8th-Jan-08
thx

van: Peter
20:00:40, 9th-Jan-08
BradPriTT,

Tru this: <input type="submit" value="verzenden" onsubmit="checkform(this)">

van: Anton
23:16:05, 27th-Mar-08
Als nu het formulier gecheckt is en in orde bevonden, hoe krijg je dan het formulier in je Email binnen, of kan dat niet verzonden worden naar een emailadres???

van: Anton
23:31:32, 27th-Mar-08
Als aanvulling op het bovenstaande het volgende script benoemd. Ik wil dus het formulier checken en tevens naar een email adres versturen:

<SCRIPT TYPE="TEXT/JAVASCRIPT">
<!--
function buildsubject()
{
var f = document.forms['resurfacingrecord'];
var sub = "mailto:nieuwlid@xxxxxx.nl?subject=Inschrijfformulier nieuw lid";
f.action = sub;
location.replace('http://www.xxxxxxxx.nl/bedankt.htm');
}

//-->
</script>

<script language="javascript">
<!--
function checkform(form) {   
for (var x=0; form.elements[x]; x++ ) {       
if (form.elements[x].value == ""){
            if(form.elements[x].id != "nocheck") {
            alert( "Vergeten '" + form.elements[x].id + "' veld in te vullen?" );       
    form.elements[x].focus();
    return false ;           
}
       }
    }       
}
</script>



In <body> staat het volgende

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
* Voornaam:
</font>
</td>
<td width="45%">
<input type="text" Name="Voornaam" id="Voornaam" size="28" maxlength="18">
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
* Voorletter(s):
</font>
</td>
<td width="45%">
<input type="text" Name="Voorletter" id="Voorletter" size="28" maxlength="8">
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
<font color="#F2FFFF">* </font>Tussenvoegsel:
</font>
</td>
<td width="45%">
<input type="text" Name="tussenvoegsel" id="nocheck" size="28" maxlength="10">
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
* Achternaam:
</font>
</td>
<td width="45%">
<input type="text" Name="Achternaam" id="Achternaam" size="28" maxlength="28">
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
* Geboortedd.:<Font Face="Verdana" size="1">ddmmjjjj</font>
</td>
<td width="45%">
<input type="text" Name="Geboortedatum" id="Geboortedatum" size="6" maxlength="8">
</td>
</tr>
</table>

<table width="49%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
<font color="#F2FFFF">* </font>Geslacht
</font>
</td>
<Font Face="Verdana" size="2">
<td width="45%">
<INPUT type=radio checked value=vrouw name=Geslacht> vrouw <INPUT type=radio value=Man
name=Geslacht> man
</font>
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
* Straat+Huisnummer:
</font>
</td>
<td width="45%">
<input type="text" Name="Adres" id="Adres" size="28" maxlength="28">
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
* Postcode:<Font Face="Verdana" size="1">(bv: 1234AS)
</font>
</td>
<td width="45%">
<input type="text" Name="Postcode" id="Postcode" size="6" maxlength="6">
</td>
</tr>
</table>


<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
* Woonplaats:
</font>
</td>
<td width="45%">
<input type="text" Name="Woonplaats" id="Woonplaats" size="28" maxlength="28">
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
+ Telefoonnummer:
</font>
</td>
<td width="45%">
<input type="text" Name="Telefoon" id="nocheck" size="28" maxlength="28">
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
+ GSM-nummer:
</font>
</td>
<td width="45%">
<input type="text" Name="GSM" id="nocheck" size="28" maxlength="28">
</td>
</tr>
</table>

<table width="49%%" border="1">
<tr>
<td width="55%">
<Font Face="Verdana" size="2">
+ Emailadres:
</font>
</td>
<td width="45%">
<input type="text" Name="Email" id="nocheck" size="28" maxlength="28">
</td>
</tr>
</table>
<font size="2">
* = verplicht&nbsp; + = gewenst</font>

<P align="center">
<Font Face="Verdana" size="2">
<BR>
Vragen en/of opmerkingen
<BR><BR>
<Textarea name="opmerkingen" cols="45" Rows="5">
</Textarea>
</Font>

<P align="center">
<Input type="submit" Name="Verstuur" Value="Verzenden"></a>&nbsp<INPUT type=reset value='Alles wissen' wissen name=reset>
</P>
</Form>


Als ik op submit druk, dan voert het script enkel maar de eerste functie uit.

van: Anton
23:43:17, 27th-Mar-08
Onder de tekst:- In <body> staat het volgende - is als eerste regel onderstaande benoemd:


<form name = "resurfacingrecord" action="about:blank" method="post" enctype="text/plain" onSubmit="return checkform(this)" "buildsubject ()">

van: Matt
18:28:42, 6th-Apr-08
Het werkt hé! Harstikke Bedankt!

van: jan
15:25:29, 4th-Nov-08
Hey!
Ik begrijp dit gedeelte niet: onSubmit=\"return checkform(this)\" <-- (this) waarom alleen this?
ik zou het dolgraag uitgelegd willen krijgen!

van: Jelle
19:27:43, 17th-Apr-09
@jan,
de 'this' refereert naar het element dat op dat moment geselecteerd is, in dit geval de <form>, dit is een makkelijke manier om een element te selecteren zonder dat je het via id's oid hoeft te doen.

betere versie van het stukje script:
<script type = "text/javascript">
function checkform(form) {
for (var x=0; form.elements[x]; x++ )
{
if (form.elements[x].title != "nocheck" && form.elements[x].value == "")
{
alert( "Vergeten het '" + form.elements[x].title + "' veld in te vullen?" );
form.elements[x].focus();
return false ;
}
}
}
</script>

Het is beter om eerst te kijken of het veld wel of niet "gecheckt" moet worden. Hierdoor voer je geen onzinnige condities uit en is het dus sneller, aangezien de conditie afbreekt voordat er word gekeken of het veld leeg is of niet.

Waarom title in plaats van id? Het ID attribuut is bedoeld om een element een uniek id te geven, niet om extra informatie aan het element te binden. Een tweede veld met id = "nocheck" zal ervoor zorgen dat je dit element niet via de getElementById methode kunt opvragen. Title is een standaard attribuut wat bedoeld is om extra informatie over het element te geven.

van: Jelle
19:31:32, 17th-Apr-09
Nog een stukje handige php code om ervoor te zorgen dat niet alles dubbel ge-escaped word (Zoals in dit gastenboek):

<?php
$magic_quotes = (bool)get_magic_quotes_gpc();
foreach($_REQUEST as &$request)
{
$request = ($magic_quotes) ? stripslashes($request) : $request;
}
unset($request)
?>

Dit stukje code zorgt ervoor dat gekeken word of er toevallig al automatisch slashes zijn toegevoegd, zo ja, haal ze dan weg.

van: Tammzak
14:56:41, 1st-May-09
function buildsubject werkt niet bij mij.. nadat alles gecontroleerd is gaat hij naar about:blank in plaats van een email te sturen en naar de location.replace link te gaan..

van: Nance
14:34:08, 19th-Mar-10
Het werkt, na lang zoeken eindelijk iemand gevonden die het duidelijk en kort kon uitleggen en beschrijven: bedankt!

Commentaar toevoegen:
Naam:
Link:(niet verplicht)
Commentaar:
<-- code:
  


Gerelateerde Artikels :
webdevelopment:
Javascript formulier check

Snel zoeken:



Gemaskerde wreker
45 Euro

Toevallig
passerende
cartoon
:




All content copyleft 2008 Joris Osterhaus - www.hardcode.nl