javascript controle lege velden
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">
<!--
function controleer(contact)
{
if(contact.naam.value == "")
{ alert("Gelieve uw naam in te vullen"); }
}
//-->
</script>
</head>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr><td class= width="750" colspan="2">Contactformulier</td></tr>
<tr><td class="standaard"><form method="post" action="mailconform.php" name="contact">
  Naam:</td><td><input type="text" size="50" name="naam" onchange="controleer(this.form)"></td></tr>
<tr><td class="standaard">  e-mail:</td><td><input type="texxt" name="mail" size="50"></td></tr>
<tr><td class="standaard">  adres:</td><td><input type="text" size="50" name="adres"></td></tr>
<tr><td class="standaard">  gemeente:</td><td><input type="text" size="25" name="adres"></td></tr>
<tr><td class="standaard">  postcode:</td><td><input type="text" size="4" name="postcode"></td></tr>
<tr><td class="standaard">  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"> <input type="submit" value="verzenden">                                   </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!
Wat fouten die je moet verbeteren:
- plaats <!doctype html> op de 1e regel van je script, dit is verplicht
- haal <!-- en --> 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)
bedankt voor alle tips.
Hieronder een herwerkte versie van mijn formulier, maar nog steds werkt de javascript niet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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"> <input type="submit" value="verzenden">
</form>
</body>
</html>
[/oode]
<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"> <input type="submit" value="verzenden">
</form>
</body>
</html>
[/oode]
Gewijzigd op 10/02/2012 11:53:32 door Andy De Clercq
zet eens een spatie voor 'id' op regel 13
zet dit erbij in je form
en maak van je javascript eens zoiets:
Code (php)
:) zou moeten werken
Toevoeging op 10/02/2012 13:01:36:
edit: getest met de link die Wouter J ook gaf en mijne werkt ook, http://tinkerbin.com/4HeeNXWs <-- link
Gewijzigd op 10/02/2012 13:02:22 door Reshad F
Of je vertrouwt op HTML5 techniek en zet required="required" bij je input fields.
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.
gewoon uit nieuwsgierigheid
wat zijn hier de voordelen van tegenover javascript behalve het feit dat js soms uit staat bij gebruikers?
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.
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!
Blij dat het gelukt is :) als je hulp nodig hebt met het uitbreiden hiervan kan je uiteraard om hulp vragen
Ja, IE8 heeft bijna geen HTML5 support. Update je browser naar een goed en degelijk modern browser als Chrome, IE9, Opera of Safari (of firefox).
probleem bij het verder uitwerken van het script. De controle op leeg zijn van het veld mail in mijn formulier lukt, ook de aanwezigheid van @ voor de controle van het adres lukt. Nu wil ik diezelfde funtie indexOf(".") gaan gebruiken en dat werkt niet, kan iemand helpen?
Alvast bedankt!
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<script type="text/javascript">
function validateForm(contact)
{
var x=document.forms["contact"]["naam"].value
if (x==null || x=="")
{
contact.naam.style.backgroundColor="#FF5B00";
alert("Gelieve uw naam in te vullen");
return false;
}
var m=document.forms["contact"]["mail"].value
if (m==null || m=="")
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mailadres in te vullen");
return false;
}
var AtPos =document.forms["contact"]["mail"].value.indexOf("@")
if(AtPos==-1)
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mailadres in te vullen");
return false;
}
var PuntPos =document.forms["contact"]["mail"].value.indexOf(".")
if(PuntPos==-1)
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mailadres in te vullen");
return false;
}
}
</script>
function validateForm(contact)
{
var x=document.forms["contact"]["naam"].value
if (x==null || x=="")
{
contact.naam.style.backgroundColor="#FF5B00";
alert("Gelieve uw naam in te vullen");
return false;
}
var m=document.forms["contact"]["mail"].value
if (m==null || m=="")
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mailadres in te vullen");
return false;
}
var AtPos =document.forms["contact"]["mail"].value.indexOf("@")
if(AtPos==-1)
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mailadres in te vullen");
return false;
}
var PuntPos =document.forms["contact"]["mail"].value.indexOf(".")
if(PuntPos==-1)
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mailadres in te vullen");
return false;
}
}
</script>
Hartelijk dank voor de goede hulp!
Ik breid de functie verder uit en bij de controle van de inhoud van het adres heb ik alweer problemen. Dit is nochtans gewoon gekopieerd van de controle van de naam. Wat doe ik toch fout?
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<html>
<head>
<title>Universitair Centrum voor Raadpleging en Orintatie Gent</title>
<link rel="stylesheet" type="text/css" href="css/sjabloon.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript">
function validateForm(contact)
{
var x=document.forms["contact"]["naam"].value
if (x==null || x=="")
{
contact.naam.style.backgroundColor="#FF5B00";
alert("Gelieve uw naam in te vullen");
return false;
}
var m=document.forms["contact"]["mail"].value
if (m==null || m=="")
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mailadres in te vullen");
return false;
}
var atpos=m.indexOf("@");
var dotpos=m.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=m.length)
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mail adres in te geven");
return false;
}
var adr=document.forms["contact"]["adres"].value
if (adr==null || adr=="")
{
contact.adres.style.backgroundColor="#FF5B00";
alert("Gelieve uw adres in te vullen");
return false;
}
}
</script>
</head>
<body class="achtergrond">
<table width="100%" height="100%" celpadding="0" celspacing="0">
<tr>
<td valign="top" align="center">
<table class="Hoofdtabel" border="0" cellpadding="0" cellspacing="0" width="958px" height="100%">
<tr>
<td background="images/banner.jpg" height="107px"></td>
</tr>
<tr><td class="achtergrond"></td></tr>
<tr valign="top">
<td>
<!--dient om de verdeling te maken tussen de tabel en de menu -->
<table border="0" width="958px" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td width="150px" valign="top" bgcolor='#2E9AFE'>
<?php
menu(0);
?>
</td>
<td class="achtergrond" width="5px"></td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" height="100%" bgcolor="white">
<tr>
<td valign="top">
<!--het tekstgedeelte moet hier komen-->
<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" id="contact" onsubmit="return validateForm(this);">
  Naam:</td><td><input type="text" size="50" name="naam" id="naam"></td></tr>
<tr><td class="standaard">  e-mail:</td><td><input type="text" id="mail" name="mail" size="50"></td></tr>
<tr><td class="standaard">  adres:</td><td><input type="text" size="50" name="adres" id="adres"></td></tr>
<tr><td class="standaard">  gemeente:</td><td><input type="text" size="25" name="adres"></td></tr>
<tr><td class="standaard">  postcode:</td><td><input type="text" size="4" name="postcode"></td></tr>
<tr><td class="standaard">  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"> <input type="submit" value="verzenden">                                   </form></td></tr>
</table>
</td>
<td class="achtergrond" width="5px" rowspan="2"></td>
<td bgcolor="#2E9AFE" width="150px" rowspan="2" valign="top">
<font class="h3"><center><i><u>Contact</u></i></center></font>
<center><font class="standaard">Begijnhoflaan 464<br>
9000 Gent<br><br>
Tel. 09/3310360<br>
Fax.: 09/ 331 03 69<br>
<a href="mailto:[email protected]">[email protected]</a></font></center><br>
<center><i><u><font class="h3">Partners</font></u></i></center><br>
<center><img src="images/ucbo.gif"></center><br>
<center><img src="images/vdab.gif"></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10px" bgcolor='#2E9AFE'><td class="standaard"><center> 2011 Universitair Centrum voor Raadpleging en Orintatie - Begijnhoflaan 464, 9000 Gent - Open op werkdagen van 09.00 tot 17.00u -
<a href="mailto:[email protected]">Contacteer ons</a></center>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<head>
<title>Universitair Centrum voor Raadpleging en Orintatie Gent</title>
<link rel="stylesheet" type="text/css" href="css/sjabloon.css">
<link rel="stylesheet" type="text/css" href="css/menu.css">
<script type="text/javascript">
function validateForm(contact)
{
var x=document.forms["contact"]["naam"].value
if (x==null || x=="")
{
contact.naam.style.backgroundColor="#FF5B00";
alert("Gelieve uw naam in te vullen");
return false;
}
var m=document.forms["contact"]["mail"].value
if (m==null || m=="")
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mailadres in te vullen");
return false;
}
var atpos=m.indexOf("@");
var dotpos=m.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=m.length)
{
contact.mail.style.backgroundColor="#FF5B00";
alert("Gelieve een geldig e-mail adres in te geven");
return false;
}
var adr=document.forms["contact"]["adres"].value
if (adr==null || adr=="")
{
contact.adres.style.backgroundColor="#FF5B00";
alert("Gelieve uw adres in te vullen");
return false;
}
}
</script>
</head>
<body class="achtergrond">
<table width="100%" height="100%" celpadding="0" celspacing="0">
<tr>
<td valign="top" align="center">
<table class="Hoofdtabel" border="0" cellpadding="0" cellspacing="0" width="958px" height="100%">
<tr>
<td background="images/banner.jpg" height="107px"></td>
</tr>
<tr><td class="achtergrond"></td></tr>
<tr valign="top">
<td>
<!--dient om de verdeling te maken tussen de tabel en de menu -->
<table border="0" width="958px" cellpadding="0" cellspacing="0" height="100%">
<tr>
<td width="150px" valign="top" bgcolor='#2E9AFE'>
<?php
menu(0);
?>
</td>
<td class="achtergrond" width="5px"></td>
<td valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" height="100%" bgcolor="white">
<tr>
<td valign="top">
<!--het tekstgedeelte moet hier komen-->
<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" id="contact" onsubmit="return validateForm(this);">
  Naam:</td><td><input type="text" size="50" name="naam" id="naam"></td></tr>
<tr><td class="standaard">  e-mail:</td><td><input type="text" id="mail" name="mail" size="50"></td></tr>
<tr><td class="standaard">  adres:</td><td><input type="text" size="50" name="adres" id="adres"></td></tr>
<tr><td class="standaard">  gemeente:</td><td><input type="text" size="25" name="adres"></td></tr>
<tr><td class="standaard">  postcode:</td><td><input type="text" size="4" name="postcode"></td></tr>
<tr><td class="standaard">  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"> <input type="submit" value="verzenden">                                   </form></td></tr>
</table>
</td>
<td class="achtergrond" width="5px" rowspan="2"></td>
<td bgcolor="#2E9AFE" width="150px" rowspan="2" valign="top">
<font class="h3"><center><i><u>Contact</u></i></center></font>
<center><font class="standaard">Begijnhoflaan 464<br>
9000 Gent<br><br>
Tel. 09/3310360<br>
Fax.: 09/ 331 03 69<br>
<a href="mailto:[email protected]">[email protected]</a></font></center><br>
<center><i><u><font class="h3">Partners</font></u></i></center><br>
<center><img src="images/ucbo.gif"></center><br>
<center><img src="images/vdab.gif"></center>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="10px" bgcolor='#2E9AFE'><td class="standaard"><center> 2011 Universitair Centrum voor Raadpleging en Orintatie - Begijnhoflaan 464, 9000 Gent - Open op werkdagen van 09.00 tot 17.00u -
<a href="mailto:[email protected]">Contacteer ons</a></center>
</td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Probleem zit dus in het laatste stukje javascript.
Alvast bedankt!
Gewijzigd op 25/02/2012 17:58:28 door Andy De Clercq