Javascript in form

[WillisTi]

Hi,

I could do with some help with this form that im using it is really starting to annoy me as i cant get it to work. When i tested it out online and entered content in all of the fields i then got a message saying "please enter your name" from the php when really i want the JavaScript to say that when i have actually missed a field out.

Heres my JavaScript and the form:

<script language="JavaScript" type="text/javascript">
<!--
function validateForm() {
with (document.comment) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (name.value == "") alertMsg += "\nName";
if (email.value == "") alertMsg += "\nE Mail";
if (addcomment.value == "") alertMsg += "\nAdd Comment";
if (alertMsg!= "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
return false;
} else {
return true;
} } }
//-->
</script>
<form name="comment" onsubmit="return validateForm();"action="mailer.php">
<input type='hidden' name='formmail_submit' value='Y' />
<input type='hidden' name='formmail_recipient' value="[e-mail]" />
<input type='hidden' name='formmail_subject' value="Feedback Contemporary Multimedia" />
<input type='hidden' name='formmail_return_subject' value="Hi, Thanks for your Feedback" />
<input type='hidden' name='formmail_return_msg' value="This is a autoresponder
I have recieved your e-mail and will be in
touch with you soon." />
<input type='hidden' name='formmail_mail_and_file' value="" />
<input type='hidden' name='formmail_charset' value="" />
<input type='hidden' name='esh_formmail_cc' value="" />
<input type='hidden' name='esh_formmail_bcc' value="" />
<input type='hidden' name='esh_formmail_mail_and_file' value="" />
<input type='hidden' name='esh_formmail_charset' value="" />
<fieldset class="fieldset">
<!--<legend>Contact form</legend>-->
<label>Name</label><br class="comment" />
<input onclick="highlight(event)" onfocus="style.borderColor='#afeeee'" onblur="style.borderColor='#cccccc';" style="border:1px solid #cccccc;" type="text" name="Name" value="" class="textfield" />
<br />
<label>Email</label><br class="comment" />
<input name="email" onfocus="style.borderColor='#afeeee'" onblur="style.borderColor='#cccccc';" style="border:1px solid #cccccc;" type="text" value="" class="textfield" />
<br/>
<!-- class='form_text' -->
<label>Subject</label><br class="comment" />
<input name="subject" onfocus="style.borderColor='#afeeee'" onblur="style.borderColor='#cccccc';" style="border:1px solid #cccccc;" type="text" value="" class="textfield" />
<br/>
<br />
<label>Comment</label><br class="comment" />
<textarea name="addcomment" class="textfield" onfocus="style.borderColor='#afeeee'" onblur="style.borderColor='#cccccc';" style="border:1px solid #cccccc;" rows="4" cols="25" ></textarea>
<br />
<br class="nobr" />
<input class="go" onmouseover="this.src='submit_ov.gif';" onmouseout="this.src='submit_ov.gif';" type="image" src="submit_ov.gif" alt=" GO! " />
<div class="break">&nbsp;</div>
</fieldset>
</form>

Heres the php:

<? //This line tells the server "PHP Code is Starting!"

//We need to get the values submitted to the form and save them.
// $blah = $_POST['email'];
// now $blah is set to whatever email is.

$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

//These IFs check if everything is filled in.

if (!$email) { //if $email is blank and not filled in
echo "Sorry, but you need to enter your email"; //tell the user to fill in the appropriate fields
exit; //stop the PHP from continuing
}

// Validate Email Address String
if (!ereg('^[-!#$%&\'*+\\./0-9=?A-Z^_`a-z{¦}~]+@[-!#$%&\'*+\\/0-9=?A-Z^_`a-z{¦}~]+\.[-!#$%&\'*+\\./0-9=?A-Z^_`a-z{¦}~]+$',$email) ) {

echo "Email field has invalid characters!";
exit;
}

if (!$name) {
echo "Sorry, but you need to enter your name";
exit;
}

if (!$message) {
echo "Sorry, but you need to say something to me";
exit;
}

//Now that we have checked that everything is filled in, LETS SEND THE EMAIL!
//We are going to use a simple function called mail().
// mail("EMAIL TO","NAME","MESSAGE","From: name <email>");

mail("[e-mail]", $name, "$email\n$message", "From: Contemporary Multimedia - Message <[e-mail]>");

header ("Location: contactthanks.htm");
//echo "Your message has been sent, thankyou."; //now lets tell the user "your email was sent!"
// either have a thank you massage here, you can use any html you want to show them.
// or you can redirect them to a thank you page.
?>

Any help would be great.

[DrDoc]

Welcome to WebmasterWorld! [WebmasterWorld.com]

Change your form tag:
<form name="comment" onsubmit="return validateForm();" action="mailer.php" method="post">

;)

[WillisTi]

Thanks i didnt realise i missed that out!

It is still coming up with the same message though "Sorry, but you need to enter your email". Even though i fill out the whole form.

[Bernard Marx]

Everything works on the client-side for me, except...

Remember that you have a form field named, "Name". This isn't a great choice, since the form itself has a member called, "name". This is why the field has to use an initial capital.

In the C-S validation you have forgotten this:

if (name.value == "") alertMsg += "\nName";

So the validation returns true, even if the Name field is empty.

It is still coming up with the same message though "Sorry, but you need to enter your email".

That string is held in the Server-Side, PHP validation. I can't see why it's happening right now. I'd suggest taking this over to PHP [webmasterworld.com].

[WillisTi]

Thanks for advice i'll test it out again and start a new thread in the PHP section if i still have problems.

[WillisTi]

The PHP folks sorted out the problem for me so the comment form now works and validates.

Here it is:

<? //This line tells the server "PHP Code is Starting!"

//We need to get the values submitted to the form and save them.
// $blah = $_POST['email'];
// now $blah is set to whatever email is.

$name = $_POST['Name'];
$email = $_POST['email'];
$message = $_POST['message'];

//These IFs check if everything is filled in.

if (!$email) { //if $email is blank and not filled in
echo "Sorry, but you need to enter your email"; //tell the user to fill in the appropriate fields
exit; //stop the PHP from continuing
}

// Validate Email Address String
if (!ereg('^[-!#$%&\'*+\\./0-9=?A-Z^_`a-z{¦}~]+@[-!#$%&\'*+\\/0-9=?A-Z^_`a-z{¦}~]+\.[-!#$%&\'*+\\./0-9=?A-Z^_`a-z{¦}~]+$',$email) ) {

echo "Email field has invalid characters!";
exit;
}

if (!isset($name) ¦¦ empty($name)) {
echo "Sorry, but you need to enter your name";
exit;
}

if (!$message) {
echo "Sorry, but you need to say something to me";
exit;
}

//Now that we have checked that everything is filled in, LETS SEND THE EMAIL!
//We are going to use a simple function called mail().
// mail("EMAIL TO","NAME","MESSAGE","From: name <email>");

mail("[e-mail]", $name, "$email\n$message", "From: Contemporary Multimedia - Message <[e-mail]>");

header ("Location: contactthanks.htm");
//echo "Your message has been sent, thankyou."; //now lets tell the user "your email was sent!"
// either have a thank you massage here, you can use any html you want to show them.
// or you can redirect them to a thank you page.
?>

May only question now is, how come the validation errors do not come up from the JavaScript?

when i have missed out a field it brings up an error on a new page instead of through a pop-up message or even better on the same screen which i thought the JavaScript would do?

It seems to me that the Javascript isnt active.

Anyone know why?

Thanks

[edited by: jatar_k at 8:33 pm (utc) on Jan. 26, 2006]
[edit reason] no urls thanks [/edit]

[jatar_k]

here are some specifics from the form

js function
<script language="JavaScript" type="text/javascript">
<!--
function validateForm() {
with (document.comment) {
var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
if (name.value == "") alertMsg += "\nName";
if (email.value == "") alertMsg += "\nE Mail";
if (addcomment.value == "") alertMsg += "\nAdd Comment";
if (alertMsg!= "The following REQUIRED fields\nhave been left empty:\n") {
alert(alertMsg);
return false;
} else {
return true;
} } }
//-->
</script>

abbreviated form
<form name="comment" onsubmit="return validateForm();" action="mailer.php" method="post">

Name
<input type="text" name="Name" value="" />
<br />
Email
<input name="email" type="text" value="" />

Subject
<input name="subject" type="text" value="" />
<br/>

Comment
<textarea name="message" rows="4" cols="25" ></textarea>
<br />

<input class="send" onmouseover="this.src='submit_ov.gif';" onmouseout="this.src='submit_ov.gif';" type="image" src="submit_ov.gif" alt=" GO! " />
</form>
I removed a ton of style stuff from that form and left out unchecked fields (hidden)

I would think onSubmit would do it, am I wrong on that oh js pros?

I see the case issue may still be a problem in that function as well but that shouldn't be the case for leaving any of them empty

[WillisTi]

Nope still does it from the PHP end not the JavaScript.

[WillisTi]

At least the PHP side is working though but i would prefer it if i could get the JavaScript working too.

[Bernard Marx]

There are still naming errors in the script:

if (name.value == "") alertMsg += "\nName";
if (addcomment.value == "") alertMsg += "\nAdd Comment";

(addcomment doesn't exist. It's called "message" in the form).

I've given it the once-over.
First thing to do (and you must for it to work) is add a reference to the form in the onsubmit handler:

onsubmit="return validateForm([blue]this[/blue]);"

Try this:

[pre]
/* Use this so as not to pass pure whitespace as valid entry */
String.prototype.trim = function(){ return this.replace(/^\s+¦\s+$/g,'')}
/**/
function validateForm(form)
{
  var req = {Name:"Name",email:"E Mail",message: "Add Comment"};
  var alertMsg = "The following REQUIRED fields\nhave been left empty:\n";
  var valid = true;
  for(var name in req){
    if(!form[name].value.trim()){
      alertMsg+= "\n"+req[name];
      valid = false;
    }
  }
  if(!valid)
    alert(alertMsg);
  return valid;
}
/**/
Change corrupted [b][red]¦¦[/red][/b] characters for pipes
[/pre]