php - javascript 验证未激活可能是由于 HTML 表单上的 php 邮件程序

Question

我的 Javascript 验证有问题，无法激活。我在这个 HTML 表单上还有一个 PHP 邮件程序，一旦按下提交，它就会提交表单并且不进行任何验证。

以下是 HTML 表单的代码:

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

这是 PHP 邮件程序的代码:

<?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";
}
?>

这是验证器的代码:

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

我尝试将 javascript 验证器作为单独的文件放在服务器上，或者将脚本本身放在 html 文档中，但两种方法似乎都不起作用。我已经进行了大量搜索并检查了代码，并且非常确定它是正确的，但是找不到任何说明这两个函数是否可以一起使用的内容。如果有人可以请确认那就太棒了!

如有任何建议，我们将不胜感激!

提前致谢!

卡兹

Answer 1

在您的 onSubmit 中，当您应该使用小写“v”执行 return validateForm() 时，您正在调用 return ValidateForm() 。还有一些其他的:

{function validateForm() 应该是 function validateForm()

永远不要在 if 语句之后关闭函数左大括号。

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

然后:

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;
    }
}