Hello there,
I am working on a javascript code that checks if fields of a contact form are filled in or not. This is done when the Send button is clicked. If the return is true, every field is filled in and the form can be sent.
This is the code I use:
[CODE]function checkForm() {
if ((pers.value.length==0) || (pers.value==null)) {
alert(“Vul aub het aantal personen in”);
return false;
} else {
if ((naam.value.length==0) || (naam.value==null)) {
alert(“Vul aub een of meerdere namen in”);
return false;
} else {
if ((adres.value.length==0) || (adres.value==null)) {
alert(“Vul aub een straat en huisnummer in”);
return false;
} else {
if ((postcode.value.length==0) || (postcode.value==null)) {
alert(“Vul aub een postcode in”);
return false;
} else {
if ((woonplaats.value.length==0) || (woonplaats.value==null)) {
alert(“Vul aub uw woonplaats in”);
return false;
} else {
if (((telefoonvast.value.length==0) || (telefoonvast.value==null) && (telefoonmobiel.value.length==0) || (telefoonmobiel.value==null))) {
alert(“Vul aub een vast of mobiel nummer in”);
return false;
} else {
if ((email.value.length==0) || (email.value==null)) {
alert(“Vul aub een e-mailadres in”);
return false;
} else {
if ((geboorte.value.length==0) || (geboorte.value==null)) {
alert(“Vul aub een of meerdere (bij meerdere personen) geboortedata in”);
return false;
} else {
if ((auto.value.length==0) || (auto.value==null)) {
alert(“Vul aub in welke auto u rijdt”);
return false;
} else {
return true;
}
}
}
}
}
}
}
}
}}
Don’t mind the language, it’s Dutch. The script about telefoonvast and telefoonmobiel are different, because only one of these 2 fields has to be filled in.
The problem is that my script only checks the first ‘if’ regarding field name ‘pers’. If this field is filled in but another field isn’t, the script returns true.
What can be the problem?
<i>
</i>if (((telefoonvast.value.length==0) || (telefoonvast.value==null) && (telefoonmobiel.value.length==0) || (telefoonmobiel.value==null)))
<i>
</i>(telefoonvast.value==null) && (telefoonmobiel.value.length==0)
if (((telefoonvast.value.length==0) || (telefoonvast.value==null)) && ((telefoonmobiel.value.length==0) || (telefoonmobiel.value==null)))
[CODE]function checkForm() {
if ((pers.value.length == 0) || (pers.value == null)) {
alert("Vul aub het aantal personen in");
return false;
}
if ((naam.value.length == 0) || (naam.value == null)) {
alert("Vul aub een of meerdere namen in");
return false;
}
if ((adres.value.length == 0) || (adres.value == null)) {
alert("Vul aub een straat en huisnummer in");
return false;
}
//ETC...
return true;
}[/CODE]
[code=html]if (!pers.value) {
//CODE
}[/code]
[code=html]if ((pers.value.length == 0) || (pers.value == null)) {
//CODE
}[/code]
[CODE]function checkForm() {
if (!pers.value) {
alert("Vul aub het aantal personen in");
return false;
}
if (!naam.value) {
alert("Vul aub een of meerdere namen in");
return false;
}
if (!adres.value) {
alert("Vul aub een straat en huisnummer in");
return false;
}
if (!postcode.value) {
alert("Vul aub een postcode in");
return false;
}
if (!woonplaats) {
alert("Vul aub uw woonplaats in");
return false;
}
if ((!telefoonvast.value) && (!telefoonmobiel.value)) {
alert("Vul aub een vast of mobiel nummer in");
return false;
}
if (!email.value) {
alert("Vul aub een e-mailadres in");
return false;
}
if (!geboorte.value) {
alert("Vul aub een of meerdere (bij meerdere personen) geboortedata in");
return false;
}
if (!auto.value) {
alert("Vul aub in welke auto u rijdt");
return false;
}
return true;
}
[/CODE]
[code=html]<input type="text" id="pers" />
if (!document.getElementById("pers").value) {
alert("Vul aub het aantal personen in");
return false;
}[/code]
<i>
</i>function checkForm() {
var df = document.forms[0]; // or .formname;
if (!df.pers.value) {
alert("Vul aub het aantal personen in"); return false;
}
etc...
}
[CODE]function checkForm() {
var df = document.forms[0];
if (!df.pers.value) {
alert("Vul aub het aantal personen in");
return false;
}
if (!df.naam.value) {
alert("Vul aub een of meerdere namen in");
return false;
}
etc...
}[/CODE]
[code=html]<form method="POST" action="contactformbedankt.php" onsubmit="return checkForm()">
<table width="460" border="0">
<tr>
<td colspan="2" valign="top"><strong>Ja, ik meld mij aan voor de komende informatieavond.</strong> </td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Aantal personen:*</font></td>
<td valign="top"><font face="Century Gothic">
<input name="pers" type="text" id="pers" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Na(a)m(en):*<br />
</font><font face="Verdana"><span class="klein">(gescheiden door komma's)</span></font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="naam" type="text" id="naam" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Adres:*</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="adres" type="text" id="adres" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Postcode:*</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="postcode" type="text" id="postcode" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Woonplaats:*</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="woonplaats" type="text" id="woonplaats" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Telefoon vast:**</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="telefoonvast" type="text" id="telefoonvast" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Telefoon mobiel:**</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="telefoonmobiel" type="text" id="telefoonmobiel" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td valign="top"><font size="2" face="Verdana">Email:*</font></td>
<td valign="top"><font face="Century Gothic">
<input name="email" type="text" id="email" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td valign="top"><font size="2" face="Verdana">Geboortedatum(s):*</font></td>
<td valign="top"><font face="Century Gothic">
<input name="geboorte" type="text" id="geboorte" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td valign="top"><font size="2" face="Verdana">Ik rijd een:*<br />
</font><font face="Verdana"> <span class="klein">(merk en type auto)
</span></font> </td>
<td valign="top"><font face="Century Gothic">
<input name="auto" type="text" id="auto" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Hoe bent u op onze site gekomen?</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<label>
<input name="cbBeleefhet" type="checkbox" id="cbBeleefhet" value="checkbox" />
</label>
Volkswagen magazine Beleef het!<br />
<label>
<input name="cbZwerfauto" type="checkbox" id="cbZwerfauto" value="checkbox" /></label>
</font>
Advertentie magazine Zwerfauto<br />
<font face="Century Gothic">
<input name="cbKck" type="checkbox" id="cbKck" value="checkbox" />
</font>Advertentie magazine KCK<br />
<font face="Century Gothic">
<input name="cbAnwb" type="checkbox" id="cbAnwb" value="checkbox" />
</font>Advertentie magazine ANWB Reizen<br />
<font face="Century Gothic">
<input name="cbMarktplaats" type="checkbox" id="cbMarktplaats" value="checkbox" />
</font>Advertentie Marktplaats<br />
<font face="Century Gothic">
<input name="cbInternet" type="checkbox" id="cbInternet" value="checkbox" />
</font>Aankondiging internet forums<br />
<font face="Century Gothic">
<input name="cbZoeken" type="checkbox" id="cbZoeken" value="checkbox" />
</font>Zoekmachine (Google, Yahoo etc)<br />
<font face="Century Gothic">
<input name="cbAnders" type="checkbox" id="cbAnders" value="checkbox" />
</font>Anders, nl:<br />
<font face="Century Gothic">
<input name="anders" type="text" id="anders" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><p class="klein">* = verplicht veld<br />
** = ten minste één van de velden verplicht </p> </td>
<td width="280" valign="top"> </td>
</tr>
<tr>
<td width="170" valign="top"> </td>
<td width="280" valign="top"><font color="#FFFFFF" size="2" face="Verdana"><strong>
<input type="submit" name="B1" value="Verzenden" style="BORDER-LEFT-COLOR: #FFFFFF; BORDER-BOTTOM-COLOR: #FFFFFF; COLOR: white; BORDER-TOP-COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; BORDER-RIGHT-COLOR: #FFFFFFbackground-color: #FFFFFF; font-family: Verdana; font-size: 10 px; border-style: solid; border-color: #FFFFFF" />
<input type="reset" name="B2" value="Reset" style="BORDER-LEFT-COLOR: #FFFFFF; BORDER-BOTTOM-COLOR: #FFFFFF; COLOR: white; BORDER-TOP-COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; BORDER-RIGHT-COLOR: #FFFFFF; background-color: #666666; font-family: Verdana; font-size: 10 px; border-style: solid; border-color: #FFFFFF" />
</strong></font></td>
</tr>
</table>
</form>[/code]
[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Form Validation</title>
</head>
<body>
<script type="text/javascript">
function checkForm() {
if (!document.getElementById("pers").value) {
alert("Vul aub het aantal personen in");
return false;
}
if (!document.getElementById("naam").value) {
alert("Vul aub een of meerdere namen in");
return false;
}
if (!document.getElementById("adres").value) {
alert("Vul aub een straat en huisnummer in");
return false;
}
if (!document.getElementById("postcode").value) {
alert("Vul aub een postcode in");
return false;
}
if (!document.getElementById("woonplaats").value) {
alert("Vul aub uw woonplaats in");
return false;
}
if ((!document.getElementById("telefoonvast").value) && (!document.getElementById("telefoonmobiel").value)) {
alert("Vul aub een vast of mobiel nummer in");
return false;
}
if (!document.getElementById("email").value) {
alert("Vul aub een e-mailadres in");
return false;
}
if (!document.getElementById("geboorte").value) {
alert("Vul aub een of meerdere (bij meerdere personen) geboortedata in");
return false;
}
if (!document.getElementById("auto").value) {
alert("Vul aub in welke auto u rijdt");
return false;
}
return true;
}
</script>
<form method="POST" action="contactformbedankt.php" onsubmit="return checkForm()">
<table width="460" border="0">
<tr>
<td colspan="2" valign="top"><strong>Ja, ik meld mij aan voor de komende informatieavond.</strong> </td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Aantal personen:*</font></td>
<td valign="top"><font face="Century Gothic">
<input name="pers" type="text" id="pers" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Na(a)m(en):*<br />
</font><font face="Verdana"><span class="klein">(gescheiden door komma's)</span></font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="naam" type="text" id="naam" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Adres:*</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="adres" type="text" id="adres" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Postcode:*</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="postcode" type="text" id="postcode" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Woonplaats:*</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="woonplaats" type="text" id="woonplaats" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Telefoon vast:**</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="telefoonvast" type="text" id="telefoonvast" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Telefoon mobiel:**</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<input name="telefoonmobiel" type="text" id="telefoonmobiel" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td valign="top"><font size="2" face="Verdana">Email:*</font></td>
<td valign="top"><font face="Century Gothic">
<input name="email" type="text" id="email" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td valign="top"><font size="2" face="Verdana">Geboortedatum(s):*</font></td>
<td valign="top"><font face="Century Gothic">
<input name="geboorte" type="text" id="geboorte" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td valign="top"><font size="2" face="Verdana">Ik rijd een:*<br />
</font><font face="Verdana"> <span class="klein">(merk en type auto)
</span></font> </td>
<td valign="top"><font face="Century Gothic">
<input name="auto" type="text" id="auto" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><font size="2" face="Verdana">Hoe bent u op onze site gekomen?</font></td>
<td width="280" valign="top"><font face="Century Gothic">
<label>
<input name="cbBeleefhet" type="checkbox" id="cbBeleefhet" value="checkbox" />
</label>
Volkswagen magazine Beleef het!<br />
<label>
<input name="cbZwerfauto" type="checkbox" id="cbZwerfauto" value="checkbox" /></label>
</font>
Advertentie magazine Zwerfauto<br />
<font face="Century Gothic">
<input name="cbKck" type="checkbox" id="cbKck" value="checkbox" />
</font>Advertentie magazine KCK<br />
<font face="Century Gothic">
<input name="cbAnwb" type="checkbox" id="cbAnwb" value="checkbox" />
</font>Advertentie magazine ANWB Reizen<br />
<font face="Century Gothic">
<input name="cbMarktplaats" type="checkbox" id="cbMarktplaats" value="checkbox" />
</font>Advertentie Marktplaats<br />
<font face="Century Gothic">
<input name="cbInternet" type="checkbox" id="cbInternet" value="checkbox" />
</font>Aankondiging internet forums<br />
<font face="Century Gothic">
<input name="cbZoeken" type="checkbox" id="cbZoeken" value="checkbox" />
</font>Zoekmachine (Google, Yahoo etc)<br />
<font face="Century Gothic">
<input name="cbAnders" type="checkbox" id="cbAnders" value="checkbox" />
</font>Anders, nl:<br />
<font face="Century Gothic">
<input name="anders" type="text" id="anders" style="BACKGROUND-COLOR: #ffffbb" size="25" />
</font></td>
</tr>
<tr>
<td width="170" valign="top"><p class="klein">* = verplicht veld<br />
** = ten minste één van de velden verplicht </p> </td>
<td width="280" valign="top"> </td>
</tr>
<tr>
<td width="170" valign="top"> </td>
<td width="280" valign="top"><font color="#FFFFFF" size="2" face="Verdana"><strong>
<input type="submit" name="B1" value="Verzenden" style="BORDER-LEFT-COLOR: #FFFFFF; BORDER-BOTTOM-COLOR: #FFFFFF; COLOR: white; BORDER-TOP-COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; BORDER-RIGHT-COLOR: #FFFFFFbackground-color: #FFFFFF; font-family: Verdana; font-size: 10 px; border-style: solid; border-color: #FFFFFF" />
<input type="reset" name="B2" value="Reset" style="BORDER-LEFT-COLOR: #FFFFFF; BORDER-BOTTOM-COLOR: #FFFFFF; COLOR: white; BORDER-TOP-COLOR: #FFFFFF; BACKGROUND-COLOR: #666666; BORDER-RIGHT-COLOR: #FFFFFF; background-color: #666666; font-family: Verdana; font-size: 10 px; border-style: solid; border-color: #FFFFFF" />
</strong></font></td>
</tr>
</table>
</form>
</body>
</html>[/code]
0.1.9 — BETA 5.28