javascript validation not activating possibly due to php mailer on HTML form

Question

I have a problem with my Javascript validation not activating. I also have a PHP mailer on this HTML form and as soon as submit is pressed it submits the form and no validation is done.

Here is the code for the HTML form:

 <form name="contact" action="mailer.php" onsubmit="return ValidateForm()" method="post"><fieldset>

<tr><td><label for="name">Name:</label></td>
<td><input type="text" name="name" id="name" placeholder="Enter your full name" />
</td></tr>

<tr><td><label for="email">Email:</label></td>
<td><input type="email" name="email" id="email" placeholder="Enter your email address" />
</td></tr>

<tr><td><label for="tel">Phone:</label></td>
<td><input type="tel" name="tel" id="tel" placeholder="Enter your phone number" />
</td></tr>

<tr><td><label for="message">Message:</label></td>
<td><textarea id="message" name="message" placeholder=""></textarea>
</td></tr>

<tr><td><input type="submit" value="Submit" name="submit" />
</form>

Here is the code for the PHP mailer:

<?php
if(isset($_POST['submit'])) {
$to = "email@address.com.au";
$subject = "Subject";
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$tel_field = $_POST ['tel'];
$message = $_POST['message'];

$body = "From: $name_field\n E-Mail: $email_field\n Phone: $tel_field\n Message:\n $message";


mail($to, $subject, $body, "From: $email_field");
echo "Data has been submitted to $to!";
echo "<a href='index.html'>Go back to Home Page</a>";
} else {
echo "error";
}
?>

Here is the code for the validator:

<script type="text/javascript">

{function validateForm()
{
var x=document.forms["contact"]["name"].value;
if (x==null || x=="")
  {
  alert("Name field must be filled out");
  return false;
  }

   var x=document.forms["contact"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
  {
  alert("Not a valid e-mail address");
  return false;
  }

 var x=document.forms["contact"]["tel"].value;
if (y==null || y=="")
  {
  alert("Phone number must be provided");
  return false;
  }

  var x=document.forms["contact"]["message"].value;
if (x==null || x=="")
  {
  alert("You have not entered a message");
  return false;
  }

  </script>

I have tried putting the javascript validator in as a separate file on the server or the script itself in the form html document and neither way seems to work. I have done a lot of searching and have checked the code and am pretty sure it's right however could not find anything to say whether or not these two functions are possible together. If someone could please confirm that it would be awesome!

Any advice would be appreciated!

Thanks in advance!

Kaz

Answer 1

In your onSubmit you are calling return ValidateForm() when you should be doing return validateForm() with a lowercase "v". There are some others:

{function validateForm() should be function validateForm()

You never close the functions opening brace after the if statement.

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

and then:

function validateForm() {
    var x = document.forms["contact"]["name"].value;
    if (x == null || x == "") {
        alert("Name field must be filled out");
        return false;
    }

    var x = document.forms["contact"]["email"].value;
    var atpos = x.indexOf("@");
    var dotpos = x.lastIndexOf(".");
    if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
        alert("Not a valid e-mail address");
        return false;
    }

    var x = document.forms["contact"]["tel"].value;
    if (y == null || y == "") {
        alert("Phone number must be provided");
        return false;
    }

   var x = document.forms["contact"]["message"].value;
    if (x == null || x == "") {
        alert("You have not entered a message");
        return false;
    }
}