Een contactformulier valideren met Dreamweaver
Voor niet-programmeurs en degenen die geen kennis hebben van Javascript voorziet Dreamweaver een zeer simpele manier om je contactformulier te valideren.
Dit wil zeggen dat je bepaalde velden in je formulier verplicht kan maken. Als de bezoeker deze niet invult zal hij een melding krijgen dat de verplichte velden niet zijn ingevuld en bijgevolg het formulier ook niet verzenden. Het is zelfs mogelijk om enkel een e-mail adres te laten invullen of een nummer van – tot.
Je kan hier een voorbeeld bekijk van deze tutorial. Probeer het formulier te verzenden zonder iets in te vullen..
Hoe maak je nu zoiets? Open Dreamweaver, maak een nieuwe pagina aan en maak je contactformulier aan. Vergeet zeker niet om je formuliervelden een benaming te geven.
Ga vervolgens naar : Tag Inspector -> + -> Behaviors -> Validate form. Zie volgende afbeelding :
Klik op ‘Validate Form’ en de volgende afbeelding verschijnt :
Deze wizard gaan we invullen om de gewenste velden verplicht te maken.
Fields : In dit vak komen alle velden te staan welke je formulier bevat. Je klikt degene aan welke je wil verplicht maken en vult vervolgens de opties eronder in.
Value : Vink aan indien het verplicht dient te zijn
Accept : Hier kan je aangeven welke voorwaarde het verpichte veld dient te hebben. Als je bijvoorbeeld ‘Email adress’ aanvinkt zal het formulier enkel verstuurd worden indien er een e-mail adres in staat.
Ga alle velden af welke je verplicht wil maken en vink de nodige opties aan. Klik op OK en save je pagina.
Meer is het niet. Als je nu het formulier wil verzenden zonder de verplichte velden in te vullen krijg je volgende melding :
Voor de CS3 gebruikers is er nog de Spry Validate optie, deze komt een volgende keer aan beurt.
Handige opties voor de leken op Javascript gebied, niet?
Nog vragen? Bezoek het forum...
:
Indien je het nuttig vond mag je altijd een bericht achterlaten of u inschrijven op onze nieuwsbrief om altijd op de hoogte te blijven.
Comments
Bijkomende tip :
Voor mensen die de tekst in het Nederlands willen, de code van dit Javascript staat tussen de … tags !
Vertaal de Engelse tekst naar het Nederlands…
Dan krijg je ongeveer zoiets :
<!–
function MM_validateForm() { //v4.0
if (document.getElementById){
var i,p,q,nm,test,num,min,max,errors=”,args=MM_validateForm.arguments;
for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=document.getElementById(args[i]);
if (val) { nm=val.name; if ((val=val.value)!=”") {
if (test.indexOf(’isEmail’)!=-1) { p=val.indexOf(’@');
if (p<1 || p==(val.length-1)) errors+=’- ‘+nm+’ moet een geldig e-mail adres bevatten.\n’;
} else if (test!=’R') { num = parseFloat(val);
if (isNaN(val)) errors+=’- ‘+nm+’ moet een getal bevatten.\n’;
if (test.indexOf(’inRange’) != -1) { p=test.indexOf(’:');
min=test.substring(8,p); max=test.substring(p+1);
if (num<min || max
Groeten,
Cocovijve
Een vraag: hoe kan je ervoor zorgen dat er in de tekstvelden ook echt tekst wordt ingevuld?
Blijkbaar is het mogelijk om alleen spaties in een tekstveld te plaatsen. Er verschijnt dan geen javascript melding dat het veld niet is ingevuld.
Gr. Maarten
Ik pas dit volledig toe op mijn website, test het, vul bepaalde verplicht velden niet in,alles lukt zoals het hoort, totdat ik op het de ‘ok-knop’ van de java-script pop-up venster klik, en blijkt dat mijn verzending alsnog doorgaat, want ik krijg nadien gewoon de vaste “bedank-pagina”. Ik keer dus niet terug naar mijn onvolledig ingevuld contactformulier. Waar zou mijn foutje zitten?
Leerzaam artikel weer, Cicco!
Zo zie je maar dat je nooit moeilijke capriolen uit moet halen. Eerst zoeken naar de makkelijkste weg, gewoon via Dreamweaver zelf…