javascript controle lege velden

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Andy De Clercq

Andy De Clercq

09/02/2012 22:13:28
Quote Anchor link
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">
<!--
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=
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<?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!
 
PHP hulp

PHP hulp

28/03/2024 17:20:39
 
Wouter J

Wouter J

09/02/2012 22:20:12
Quote Anchor link
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 <!-- 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)
 
Andy De Clercq

Andy De Clercq

10/02/2012 11:48:44
Quote Anchor link
Hallo,
bedankt voor alle tips.
Hieronder een herwerkte versie van mijn formulier, maar nog steds werkt de javascript niet.
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<!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]
Gewijzigd op 10/02/2012 11:53:32 door Andy De Clercq
 
- Ariën  -
Beheerder

- Ariën -

10/02/2012 11:59:38
Quote Anchor link
zet eens een spatie voor 'id' op regel 13
 
Reshad F

Reshad F

10/02/2012 12:47:00
Quote Anchor link
probeer dit eens

zet dit erbij in je form

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php

onsubmit="return validateForm(this);"

?>


en maak van je javascript eens zoiets:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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

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
 
Roel -

Roel -

10/02/2012 14:01:39
Quote Anchor link
Of je vertrouwt op HTML5 techniek en zet required="required" bij je input fields.
 
Eddy B

Eddy B

10/02/2012 14:17:08
Quote Anchor link
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

Reshad F

10/02/2012 14:31:55
Quote Anchor link
@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

Wouter J

10/02/2012 15:09:45
Quote Anchor link
@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

Andy De Clercq

15/02/2012 22:54:52
Quote Anchor link
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

Reshad F

15/02/2012 22:59:19
Quote Anchor link
Blij dat het gelukt is :) als je hulp nodig hebt met het uitbreiden hiervan kan je uiteraard om hulp vragen
 
Wouter J

Wouter J

15/02/2012 22:59:49
Quote Anchor link
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).
 
Andy De Clercq

Andy De Clercq

23/02/2012 00:03:41
Quote Anchor link
Hallo,
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)
PHP script in nieuw venster Selecteer het PHP script
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
<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>
 
Reshad F

Reshad F

23/02/2012 11:54:32
Quote Anchor link
maak er is dit van

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
var x=document.forms["contact"]["mail"].value
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
       contact.mail.style.backgroundColor="#FF5B00";
  alert("vul uw email adress in alstublieft");
  return false;
  }
 
Andy De Clercq

Andy De Clercq

25/02/2012 16:29:09
Quote Anchor link
Oké, dit werkt perfect en is zelfs nog iets uitgebreider dan wat ik had.
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)
PHP script in nieuw venster Selecteer het PHP script
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
<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);">
                &nbsp Naam:</td><td><input type="text" size="50" name="naam" id="naam"></td></tr>
            <tr><td class="standaard">&nbsp e-mail:</td><td><input type="text" id="mail" name="mail" size="50"></td></tr>
            <tr><td class="standaard">&nbsp adres:</td><td><input type="text" size="50" name="adres" id="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>
            </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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.