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

Question

我敢肯定,最初的反应将会是这样的,"难道这个家伙没有谷歌吗？" 是的,我承认这看起来确实是一个非常基本的概念,我试过并试图绕过它,查看关于这个主题的各种帖子和文章等等,但都无济于事.也许你可以指出我正确的方向？

我有一个基本的联系表单(contact.html),我使用外部PHP脚本(contact.php)运行.这是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);
        }
    });
});

这将在警报窗口中显示您的错误消息,如果我没有记错,您的网站将不会重新加载.