javascript controle lege velden

Door Andy De Clercq op 09-02-2012 22:13

6.515 views

Hallo,
ik ben pas begonnen met het toevoegen van javascript aan mijn webpainga's. Nu wil ik dit gebruiken om mijn lege velden te controleren in een formulier maar dat werkt niet.
Kan er me iemand verder op weg helpen?
<html>
<head>
<script type="text/javascript">

</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td class=<?php echo $class; ?> width="750" colspan="2">Contactformulier</td></tr>
<tr><td class="standaard"><form method="post" action="mailconform.php" name="contact">
&nbsp Naam:</td><td><input type="text" size="50" name="naam" onchange="controleer(this.form)"></td></tr>
<tr><td class="standaard">&nbsp e-mail:</td><td><input type="texxt" name="mail" size="50"></td></tr>
<tr><td class="standaard">&nbsp adres:</td><td><input type="text" size="50" name="adres"></td></tr>
<tr><td class="standaard">&nbsp gemeente:</td><td><input type="text" size="25" name="adres"></td></tr>
<tr><td class="standaard">&nbsp postcode:</td><td><input type="text" size="4" name="postcode"></td></tr>
<tr><td class="standaard">&nbsp formuleer uw vraag</td><td class="standaard"><textarea cols="40" rows="10" name="vraag"></textarea></td></tr>
<tr><td></td><td align="right"><input type="reset" value="opnieuw">&nbsp<input type="submit" value="verzenden">&nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</form></td></tr>

</table>
</body>
</html>
Momenteel controler ik enkel het eerste veld, maa dit wil ik dan verder uitbreiden.
Alvast bedankt voor de hulp!

Wouter J

09-02-2012 22:20

Kun je misschien je code tussen [code] tags plaatsen?

Wat fouten die je moet verbeteren:
- plaats <!doctype html> op de 1e regel van je script, dit is verplicht
- haal  weg uit de <script> tags, dit is ouderwets en overbodig
- een formulier maken we niet meer op met tabellen. Gebruik het <label> element en tags als <fieldset>
- gebruik geen inline CSS als style="" border="" height="" enz.
- gebruik id's en geen namen om elementen te selecteren

Voorbeeldje van goede code: http://tinkerbin.com/5Kw4ajSq (klik op RUN linksonder)

Andy De Clercq

10-02-2012 11:48 gewijzigd op 10-02-2012 11:53

Hallo,
bedankt voor alle tips.
Hieronder een herwerkte versie van mijn formulier, maar nog steds werkt de javascript niet.
[code]
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function controleer(contact)
{
if(contact.naam.value == "")
{ alert("Gelieve uw naam in te vullen"); }
}
</script>
</head>
<body>
<form method="post" action="mailconform.php"id="contact">
<fieldset>
<legend>Contactformulier</legend>
<label for="naam">Naam</label><input type="text" size="50" id="naam" onchange="controleer(this.form)"><br>
<label for="mail">e-mail:</label><input type="texxt" id="mail" size="50"><br>
<label for="adres">Adres:</label><input type="text" size="50" id="adres"><br>
<label for="gemeente">Gemeente:</label><input type="text" size="25" id="gemeente"><br>
<label for="postcode">Postcode:</label><input type="text" size="4" id="postcode"><br>
formuleer uw vraag<br><textarea cols="40" rows="10" id="vraag"></textarea>
</fieldset>
<input type="reset" value="opnieuw">&nbsp<input type="submit" value="verzenden">
</form>
</body>
</html>
[/oode]

Ariën

10-02-2012 11:59

zet eens een spatie voor 'id' op regel 13

Reshad F

10-02-2012 12:47 gewijzigd op 10-02-2012 13:02

probeer dit eens

zet dit erbij in je form

<?php

onsubmit="return validateForm(this);"

?>

en maak van je javascript eens zoiets:

<?php

function validateForm(contact)
{
var x=document.forms["contact"]["naam"].value
if (x==null || x=="")
{
contact.naam.style.backgroundColor="#FF5B00";
alert("vul uw voornaam in alstublieft");
return false;
}
}

?>

:) zou moeten werken

[size=xsmall]Toevoeging op 10/02/2012 13:01:36:[/size]

edit: getest met de link die Wouter J ook gaf en mijne werkt ook, http://tinkerbin.com/4HeeNXWs <-- link

Roel -

10-02-2012 14:01

Of je vertrouwt op HTML5 techniek en zet required="required" bij je input fields.

Eddy B

10-02-2012 14:17

Om Roel even te ondersteunen, ik zelf ben ook omgeschakeld op HTML5 bij veel websites. Gewoon HTML5 het werk laten doen en met PHP of ASP nog even nakijken of alles wel klopt, iedereen krijgt dus gewoon nette HTML5 meldingen behalve IE7 gebruikers e.d., die krijgen een berichtje op een witte pagina.

Reshad F

10-02-2012 14:31

@eddy @roel

gewoon uit nieuwsgierigheid
wat zijn hier de voordelen van tegenover javascript behalve het feit dat js soms uit staat bij gebruikers?

Wouter J

10-02-2012 15:09

@Reshadd, JS staat bijna altijd aan dus dat kun je wel verwaarlozen.

Tevens zal ik required gebruiken zonder value name, dat maakt het stukken beter.

Het voordeel is dat je hier geen extra checks voor hoeft te doen en het browser het afhandelt en dat de error berichten in de taal van de browser zijn (al kun je deze errors wel met JS aanpassen). Het enige irritante is dat je hele lelijke error boxen krijgt. In Chrome15 was deze echt foei lelijk, maar het is nu al een stukje beter. In Chrome heb je ook nog de mogelijkheid om de 'error-bubble' te bewerken met CSS, maar in andere browsers kan dat nog niet.

Andy De Clercq

15-02-2012 22:54

Hallo,
allemaal hertelijk bedankt voor de reactie. Zelf heb ik alle tips getest en ben ik verder geholpen met dat javascript van reshadd farid
Die html5 lijkt geen uitwerking te hebben. Ik heb IE8 als browser, moet je nog iets anders doen ook om die nieuwe tags te gebruiken?
In elk geval bouw ik de funtie verder uit en probeer ik nu om te controleren op juistheid van mijn e-mail.
Nogmaals bedankt!

Reshad F

15-02-2012 22:59

Blij dat het gelukt is :) als je hulp nodig hebt met het uitbreiden hiervan kan je uiteraard om hulp vragen

Reageren

Inloggen om te reageren