php - 在同一页面上显示 PHP 表单验证结果

Question

我敢肯定最初的 react 是，“这家伙没有谷歌吗？”是的，我承认这看起来确实是一个非常基本的概念，我已经尝试并尝试围绕它，查找有关该主题的各种帖子和文章等，但都无济于事。也许你能给我指出正确的方向？

我有一个使用外部 PHP 脚本 (contact.php) 运行的基本联系表单 (contact.html)。这是 HTML 表单代码:

<form id="form1" action="contact.php" method="post">
<div class="form1">
<label>Your Name:</label>
<span><input type="text" name="name" /></span>
</div>
<div class="form1">
<label>Your School:</label>
<span><input type="text" name="school" /></span>
</div>
<div class="form1">
<label>Phone Number:</label>
<span><input type="text" name="phone" /></span>
</div>
<div class="form1">
<label>E-Mail Address:</label>
<span><input type="text" name="email" /></span>
</div>
<div class="form3">
<span><textarea cols="1" rows="1" name="message"></textarea></span>
</div>
<div class="wrapper">
<input class="submit" type="image" src="images/contact_submit.png" name="submit" alt="Submit" />
</div>
</form>

PHP 脚本验证是否输入了所有字段，然后处理表单:

<?php

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

//Validate the name:
if (!empty($_POST['name'])) {
    $name = $_POST['name'];
} else {
    echo "You forgot to enter your name.<br>";
}

//Validate the school:
if (!empty($_POST['school'])) {
    $school = $_POST['school'];
} else {
    echo "You forgot to enter your school.<br>";
}

//Validate the e-mail:
if (!empty($_POST['email'])) {
    $email = $_POST['email'];
} else {
    echo "You forgot to enter your e-mail.<br>";
}

//Validate the message:
if (!empty($_POST['message'])) {
    $message = $_POST['message'];
} else {
    echo "You forgot to enter a message.";
}

if (!empty($_POST['name']) && !empty($_POST['school']) && !empty($_POST['email']) && !empty($_POST['message'])) {
    $phone = $_POST['phone'];
    $body = "$name\n$school\n$phone\n$email\n\n$message";
    mail("***", "PAL Website - Message from a Visitor", $body);
    header("Location: confirm.html");
}

}

?>

一切正常，表单已按预期进行验证和处理。但是，我真的很想设置它，以便错误消息显示在同一页面上，或者至少刷新包含错误消息的表单。

我已经在其他演示(例如 Larry Ullman 的书)中看到过这样做，但仍然不太清楚如何实现它。你能提供建议吗？最简单的方法是什么？

这是页面 URL，如果有帮助的话:http://www.712jefferson.org/pal/contact.html

谢谢!

Answer 1

为此我会使用 jQuery。要进行的修改:

在 HTML 中:将 id 添加到您的输入字段，以便您可以使用 jQuery“抓取”它们(您可以在下面的 $.post 方法中查看用法)。

<form id="form1" action="contact.php" method="post">
   <div class="form1">
      <label>Your Name:</label>
      <span><input id="name" type="text" name="name" /></span>
   </div>
   <div class="form1">
      <label>Your School:</label>
      <span><input id="school" type="text" name="school" /></span>
   </div>
   <div class="form1">
      <label>Phone Number:</label>
      <span><input id="phone" type="text" name="phone" /></span>
   </div>
   <div class="form1">
      <label>E-Mail Address:</label>
      <span><input id="email" type="text" name="email" /></span>
   </div>
   <div class="form3">
      <span><textarea id="message" cols="1" rows="1" name="message"></textarea></span>
   </div>
   <div class="wrapper">
      <input class="submit" type="image" src="images/contact_submit.png" name="submit" alt="Submit" />
   </div>
</form>

在 PHP 中:如果验证没有错误回显:“成功”

if (!empty($_POST['name']) && !empty($_POST['school']) && !empty($_POST['email']) && !empty($_POST['message'])) {
    echo "success";
    $phone = $_POST['phone'];
    $body = "$name\n$school\n$phone\n$email\n\n$message";
    mail("***", "PAL Website - Message from a Visitor", $body);
    header("Location: confirm.html");
}

附上jQuery库添加到您的站点，并在您的 HTML 文件中括号内或附加到您站点的外部 *.js 文件中使用下面的代码。在你的 HTML 文件的部分使用这个:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>

jQuery 脚本:

$('#form1').submit(function() {
    event.preventDefault(); 
    $.post("contact.php", {name: $("#name").val(), school: $("#school").val(), phone: $("#phone").val(), email: $("#email").val(), message: $("#message").val()}, function(data){
        if(data !="success"){
            alert(data);
        }
    });
});

这将在警告窗口中显示您的错误消息，如果我没记错的话，您的网站将不会重新加载。