Form validation not working correctly

[Jeroen van Zijp]

I have to build a small contactform validator in JS, which checks the fields' values when submit is clicked. I am experiencing problems with getting the email validation to work properly. This is what I've got:

function validate_form()
{
    valid = true;

	// Validation of email input
	if ( (document.contact.email.length < 7) || (document.contact.email.value == "") || (!document.contact.email.indexOf("@")) || (!document.contact.email.indexOf(".")) )
	{
		alert("Please fill in a correct email address.");
		valid = false;
	}
    return valid;
}

When I don't fill in anything in the email field, I indeed get the proper alert. But when I fill in a string between 1 and 7 characters, the (document.contact.email.length < 7) is not met. The same goes for the last two conditions: (!document.contact.email.indexOf("@")) || (!document.contact.email.indexOf(".")). Even when (one of) these two conditions are not met, it is possible to submit the form...

Does anybody know what I am doing wrong? I am new with developing and especially with JS so please go a little bit easy on me. :)

Thanks!

[MHENRU]

Please paste the html form you use to call this function. Thanks.

[Jeroen van Zijp]

Please paste the html form you use to call this function. Thanks.

Hey, thanks for asking!

Here is the contact-form as-is. Please note it is in the Dutch language, so sorry if you don't understand some field-names. Also, the above mentioned javascript is included in <script type="text/javascript"></script> tags.

<form enctype="multipart/form-data" action="submitform.php" method="post" name="contact" onsubmit="return validate_form();">
<fieldset>
<legend><h1>Contact</h1></legend>
	<table class="contact">
		<tr>
			<td class="contactLabel"><label for="aanhef"><b>Aanhef </b>*</label></td>
			<td><input type="radio" name="aanhef" id="aanhef" value="De heer" />De heer&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="aanhef" id="aanhef" value="Mevrouw" />Mevrouw&nbsp;&nbsp;&nbsp;<!-- Validation! !--></td>
		</tr>
		<tr>
			<td class="contactLabel"><label for="naam"><b>Naam </b>*</label></td>
			<td><input type="text" name="naam" id="naam" /><!-- Validation! !--></td>
		</tr>
		<tr>
			<td class="contactLabel"><label for="email"><b>E-mailadres </b>*</label></td>
			<td><input type="text" name="email" id="email" /><!-- Validation! !--></td>
		</tr>
		<tr>
			<td class="contactLabel"><label for="telefoon"><b>Landcode </b>*</label></td>
			<td><input type="text" name="landcode" id="landcode" maxlength="3" size="3" /> <b> Telefoonnummer </b>*<input type="text" name="telefoon" id="telefoonnummer" maxlength="11" size="12" /><!-- Validation! !--></td>
		</tr>
		<tr>
			<td class="contactLabel"><label for="onderwerp"><b>Onderwerp </b>*</label></td>
			<td>
					<select name="onderwerp">
						<option value="domains">Domeinregistraties</option>
						<option value="support">Support / Helpdesk</option>
						<option value="sales">Verkoopassistentie</option>
						<option value="admin">Administratie</option>
					</select>
			</td>
		<tr>
			<td class="contactLabelVraag"><label for="vraag"><b>Uw vraag </b>*</label></td>
			<td><textarea name="vraag" id="vraag" rows="6" cols="30"></textarea><!-- Validation! !--></td>
		</tr>
		<tr>
			<td class="contactLabel"><label for="upload"><b>Upload bestand </b><br />(Maximaal 2MB,<br />.gif, .jp(e)g, .png, .pdf)</label></td>
			<td class="contactUpload">Kies uw bestand: <input name="upload" type="file" /></td>
		</tr>
		<tr>
			<td class="contactLabelVraag"><label for="captcha"><b>Neem over </b>*<br />(Beveiligingsmaatregel)</label></td>
			<td></td>
		</tr>
		<tr>
			<td class="contactLabel"></td>
			<td><input type="submit" name="Submit" id="Submit" value="Versturen" /></td>
		</tr>
	</table>
</fieldset>
</form>

[MHENRU]

Try to change your validate_form() to the following to correctly validate the email:

function validate_form()
{
   valid = true;
   var email=document.forms["contact"]["email"].value;
   var atpos=email.indexOf("@");
   var dotpos=email.lastIndexOf(".");
   if ((atpos<1) || (dotpos<atpos+2) || (dotpos+2>=email.length) || email.length<7){
      alert("Vul een goed e-mailadres.");
      valid=false;
   }
   return valid;
}

pls let know if it works.

[Jeroen van Zijp]

Try to change your validate_form() to the following to correctly validate the email:

function validate_form()
{
   valid = true;
   var email=document.forms["contact"]["email"].value;
   var atpos=email.indexOf("@");
   var dotpos=email.lastIndexOf(".");
   if ((atpos<1) || (dotpos<atpos+2) || (dotpos+2>=email.length) || email.length<7){
      alert("Vul een goed e-mailadres.");
      valid=false;
   }
   return valid;
}

pls let know if it works.

That works exactly as wanted, thanks!

Though, could you please explain why my method wasn't working?

[Jeroen van Zijp]

By the way, the "email.length<7"-part wasn't put between ()'s so I did that myself MHENRU. :)

[MHENRU]

glad to help.
you didn't specify the "value" in your walk through the html's DOM.
Ex:
where one of your if-statement's arguments was:
(document.contact.email.length < 7)
it should have been:
(document.contact.email.value.length < 7)
same with the other arguments that didn't work.

you weren't far off the mark with the logic in your script, but as you see the script i pasted also checks for the correct position of the "@" and "."'s.