/    Sign up×
Community /Pin to ProfileBookmark

Problem in quite simple code.

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;
}
}
}
}
}
}
}
}
}}[/CODE]

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?

to post a comment
JavaScript

18 Comments(s)

Copy linkTweet thisAlerts:
@AlzheimersAug 12.2009 — Not sure quite what the problem is yet, but the [url=http://www.codehouse.com/javascript/precedence/]order of precedence[/url] in your "telefoonvast" / "telefoonmobiel" check appears different then the logic you want:

<i>
</i>if (((telefoonvast.value.length==0) || (telefoonvast.value==null) &amp;&amp; (telefoonmobiel.value.length==0) || (telefoonmobiel.value==null)))


By order of precedence, this LogicalAnd gets compared first:
<i>
</i>(telefoonvast.value==null) &amp;&amp; (telefoonmobiel.value.length==0)


What you want is to OR the two on the left together, OR the two on the right, and then AND that combination to see if either combination is valid.

Try this instead:

if (((telefoonvast.value.length==0) || (telefoonvast.value==null)) &amp;&amp; ((telefoonmobiel.value.length==0) || (telefoonmobiel.value==null)))
Copy linkTweet thisAlerts:
@CyroqauthorAug 12.2009 — Oh you're right indeed, I guess I couldn't see it anymore because of the huge amount of brackets ?.

I tested it again, but it gives the same result (didn't expect anything to change, but you never know...)
Copy linkTweet thisAlerts:
@CyroqauthorAug 12.2009 — Oh god I just found out what was wrong. Somehow, I was missing the id of the second (naam) textfield. This means the script stopped at that point.

Well, thanks for your help anyways!
Copy linkTweet thisAlerts:
@thraddashAug 12.2009 — For the sake of readability why dont you consider a validation layout like:

[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]


Then at least it won't be a nighmare adding more fields or changing their order of validation.
Copy linkTweet thisAlerts:
@CyroqauthorAug 12.2009 — I know, I'm terrible at making clear layouts. But hell, I'm halfway the code so I need to adjust some things before I finish everything.

Btw, won't this script result in many alerts at the same time if multiple fields are left blank? The elses are missing...
Copy linkTweet thisAlerts:
@thraddashAug 12.2009 — This code is exactly the same as yours. When Javascript reaches a [B]return[/B], it will immediately jump out of that function. So you will only get one [B]alert[/B] ?
Copy linkTweet thisAlerts:
@thraddashAug 12.2009 — Just for your information:

[code=html]if (!pers.value) {
//CODE
}[/code]


Works the same as...

[code=html]if ((pers.value.length == 0) || (pers.value == null)) {
//CODE
}[/code]
Copy linkTweet thisAlerts:
@CyroqauthorAug 12.2009 — Ok I'm quite new at javascript, thanks! This indeed makes it more readable. I will change it tomorrow.

Since this topic is now quite busy, can I ask another question or shall I open a new topic for it?
Copy linkTweet thisAlerts:
@thraddashAug 12.2009 — I guess if it is related to this particular question then write it here. Otherwise I would just create a new topic to generate interest from others.
Copy linkTweet thisAlerts:
@CyroqauthorAug 14.2009 — Ok I will open a new topic for that.

But first, there are still some problems with my code. I changed the code so it is much shorter (no 'else' and using !pers.value).

The problem is that it only reads the first field 'pers'. The next field (no mather which field that is) always results in an error. When I trace the value of the field, it is empty, even when I typed something in it.

This is my script now:
[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]
Copy linkTweet thisAlerts:
@thraddashAug 14.2009 — I'm sorry, but [B]pers[/B] would need to have been declared outside of this function for it to work. (as I do not know how your fields are layed out)

If you are querying the value of an [B]<input>[/B] field then you should be refering to it by its [B]id[/B] tag such as:

[code=html]<input type="text" id="pers" />

if (!document.getElementById("pers").value) {
alert("Vul aub het aantal personen in");
return false;
}[/code]


Does that help?
Copy linkTweet thisAlerts:
@CyroqauthorAug 14.2009 — It doesn't work yet... well I actually can't test it. On the same page, there is a flash menu. I don't know why, but the buttons don't work anymore. Maybe it is because the menu also works with the document.getElementById function. I don't get the link though...

But I think my code should be working like it was before, because the first field works perfectly. Only the second field that has to be filled in can't be analyzed for some reason.
Copy linkTweet thisAlerts:
@thraddashAug 14.2009 — Would you mind submitting the <form> content so I can check it?
Copy linkTweet thisAlerts:
@NedalsAug 14.2009 — Looks like you are missing the 'document.forms[]'
<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...
}
Copy linkTweet thisAlerts:
@CyroqauthorAug 15.2009 — Ok I added the document.forms but it still doesn't work. When I send the form with empty fields I don't get any alert and the form is sent empty.

I now use this javascript:
[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]

And this html for the form:
[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 &eacute;&eacute;n van de velden verplicht </p> </td>
<td width="280" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="170" valign="top">&nbsp;</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]

It's quite some text, I hope it's clear. I probably didn't write this efficient as well, but ok. The part with the checkboxes isn't necessary for this problem but I thought it would be wise to just copy everything regarding the form.
Copy linkTweet thisAlerts:
@NedalsAug 15.2009 — Tested with only the first five fields and it works as expected.

What's not working?

Try testing a bit at a time to learn where the problem is.
Copy linkTweet thisAlerts:
@thraddashAug 15.2009 — This is what I have tested and all seems to be working with the [B]document.getElementById[/B] method:

[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 &eacute;&eacute;n van de velden verplicht </p> </td>
<td width="280" valign="top">&nbsp;</td>
</tr>
<tr>
<td width="170" valign="top">&nbsp;</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]


Working in IE and FF.
Copy linkTweet thisAlerts:
@CyroqauthorAug 16.2009 — I finally caught the problem. On the same page is another form, and if I remove it the form works perfectly.

My page is based on multiple divs, which are invisible except one. That one is the current page: so I only use 1 index.html.

The forms used the same id tags, that was the problem. I renamed everything and now it works!

Thanks a lot guys, I am glad I/we sorted it out.
×

Success!

Help @Cyroq spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...