Form being sent when not validated

Flic

10-17-2006, 04:14 PM

Hi,

I have a page with a form on it. I also have as part of the page some form validation using javascript. However, and this is rather frustrating, the form is being sent even when the validation is failing. If the form fails validation it shouldn't be sent.

The code is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="geco.css" />
<link rel="stylesheet" type="text/css" href="geco_form.css" />

<SCRIPT type="text/javascript" language="Javascript">
function check(selected) {
var formok = false;
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if ((selected.name.value == "") || (selected.email.value == "") || (selected.enq.value == "")) {
formok = false;
if (selected.name.value == "") {
document.getElementById('namel').style.color = "#FF0000";
} if (selected.email.value == "") {
document.getElementById('emaill').style.color = "#FF0000";
} if (selected.enq.value == "") {
document.getElementById('enql').style.color = "#FF0000";
}
} else if (selected.email.value.match(emailExp)){
formok = false;
} else {
formok = true;
}
return formok;
}
</SCRIPT>

</head>
<body>
<div id="header">&nbsp</div>
<div id="links_bar">
<div class="links" id="nonclick">&nbsp</div>
<div class="links" id="click"><a href="index.html">About</a></div>
<div class="links" id="click"><a href="contact.html">Contact</a></div>
<div class="links" id="click"><a href="where.html">Where we are</a></div>
<div class="links" id="nonclick">&nbsp</div>
</div>
<div id="seperator">&nbsp</div>

<div id="content">
<h1>Email Us</h1>
<form name="contactform" method=post action="send.php" onsubmit="return check(this)">
<p><label for="name" id="namel">Your name: *</label>
<input class="text" type="text" name="name" /></p>
<p><label for="email" id="emaill">Your email: *</label>
<input class="text" type="text" name="email" /></p>
<p><label for="tel" id="tell">Your phone number:</label>
<input class="text" type="text" name="tel" /></p>
<p><label for="ref" id="refl">Your reference:</label>
<input class="text" type="text" name="ref" /></p>
<p><label for="enq" id="enql">Your enquiry: *</label>
<textarea name="enq"></textarea></p>
<p>&nbsp</p>
<p><input type="submit" value="Send Email" /></p>
</form>
</div>

</body>
</html>

Any ideas why and how to fix? I've been trying for a while to get this to work.

Thanks,

Flic

Kor

10-17-2006, 05:01 PM

for the begining, use JSON ( as name is a javascript used word)

selected.elements['name'].value

Flic

10-18-2006, 09:52 AM

Right, I've made that amendment but its still not stopping the form being sent.

Philip M

10-18-2006, 07:08 PM

Delete return here. The variable being returned is formok.

onsubmit="check(this)">

Flic

10-19-2006, 01:04 PM

Still not working :confused:

I've finished the rest of the site now, so have uploaded it. You can see it at http://www.gecofabrications.co.uk/contact.html .

This is the last thing to get working and is really annoying me!

Could someone please take a look at it and let me know why it isn't working!

Thank you!

Flic

jmrker

10-19-2006, 04:49 PM

On looking at your validation file, I would suggest trying the following:

// Original version
/*
function check(selected) {
document.getElementById('namel').style.color = "#000000";
document.getElementById('emaill').style.color = "#000000";
document.getElementById('enql').style.color = "#000000";
var formok = false;

if ((selected['name'].value == "")
|| (selected['email'].value == "")
|| (selected['enq'].value == "")
|| (selected['emailFrom'].value.indexOf('@') == -1)) {
formok = false;
if (selected['name'].value == "") {
document.getElementById('namel').style.color = "#FF0000";
} if ((selected['email'].value == "") || (selected['emailFrom'].value.indexOf('@') == -1)) {
document.getElementById('emaill').style.color = "#FF0000";
} if (selected['enq'].value == "") {
document.getElementById('enql').style.color = "#FF0000";
} else {
formok = true;
}
return formok;
}
}
*/
// New version
function check(selected) {
document.getElementById('namel').style.color = "#000000";
document.getElementById('emaill').style.color = "#000000";
document.getElementById('enql').style.color = "#000000";
var formok = ((selected['name'].value == "") || (selected['email'].value == "")
|| (selected['enq'].value == "") || (selected['emailFrom'].value.indexOf('@') == -1));
// if ANY of above tests are TRUE, then 'formok' variable is TRUE, meaning there is a missing entry

if (formok == true) { // notify calling function that validation has errors.
if (selected['name'].value == "") { document.getElementById('namel').style.color = "#FF0000"; }
if ((selected['email'].value == "")
|| (selected['emailFrom'].value.indexOf('@') == -1)) { document.getElementById('emaill').style.color = "#FF0000"; }
if (selected['enq'].value == "") { document.getElementById('enql').style.color = "#FF0000"; }
formok = false;
} else { formok = true; }
return formok;
}

I changed the tests slightly, see comments, and added some '}' to improve visibility for myself.
I have not tested the code for any syntax errors.

Flic

10-20-2006, 03:54 PM

Jmrker Sorry to take so long to reply to your post I didn't get the email to say I had a reply.

Unfortunatly that doesn't make any difference.

It seems that the problem is not with the validation in itself, in that if something is wrong it does show up as red, however the code isn't stopped from submitting.

I've now added some extra PHP code to the mail sending process so that it will check and stop the email there, but I still want the javascript to work.

CFMaBiSmAd

10-20-2006, 04:41 PM

I just tried your current code on my test server and it works, except for the following - if something is entered in the inquiry field, it ignores the other checks and submits.

If these are the same results you are getting, this would indicate a simple logic error that returns a TRUE value if the inquiry field contains something which over-rides the results of your other checks.

Flic

10-21-2006, 12:55 PM

Woo! Thank you!

I didn't break it down that much, I just thought it wasn't stopping it at all! Once you said that I tested it much more thoroughly and you were right.

I've reworked the logic a bit and it now works perfectly!

Thank you!

*Makes a mental note to fully test in future if something isn't doing as planned.*