联系表格问题（红色边框验证）答案

【问题标题】：Contact Form Problems (Red Border Validation)联系表格问题（红色边框验证）
【发布时间】：2013-12-21 23:24:39
【问题描述】：

我已经在网上搜索了两天的某种 PHP 模板（因为我不知道如何用 PHP 编写代码），如果用户没有输入所有正确的信息，它可能会突出显示红色边框。我设法让联系表格工作，但不是我想要的方式。本质上，我需要用户输入正确的信息；如果不是，则会出现红色边框。

现状： [基本联系表：无验证]

期望的情况： [验证联系表] *

姓名（必填）（如果错误：红色边框）
电子邮件（必填：至少包含@符号）（如果错误：红色边框）
主题（必填）（如果错误：红色边框）
消息（必填）（如果错误：红色边框）

我的网站是：www.haildark.com，如果您想详细了解它。如果可以的话请帮忙。我想我的大脑又要崩溃了。谢谢你。它不必在 PHP 中。只要代码完成工作，我就完全没问题。

HTML：

<!-- Contact -->
<div class="wrapper wrapper-style5">
  <article id="contact" class="container small">
    <header>
      <h2>
        Contact Us
      </h2>
      <span>
        If you have any questions, comments, or concerns, please contact below and we will respond as soon as we can.
        Please allow us at least 72 hours to respond. Thanks for supporting us.
      </span>
    </header>
    <div>
      <div class="row">
        <div class="12u">
          <form method="post" action="contact.php">
            <div>
              <div class="row half">
                <div class="6u">
                  <input type="text" name="name" id="name" placeholder="Name" />
                </div>
                <div class="6u">
                  <input type="text" name="email" id="email" placeholder="Email" />
                </div>
              </div>
              <div class="row half">
                <div class="12u">
                  <input type="text" name="subject" id="subject" placeholder="Subject" />
                </div>
              </div>
              <div class="row half">
                <div class="12u">
                  <textarea name="message" id="message" placeholder="Message">
                  </textarea>
                </div>
              </div>
              <div class="row">
                <div class="12u">
                  <a href="#" class="button form-button-submit">
                    Send Message
                  </a>
                  <a href="#" class="button button-alt form-button-reset">
                    Clear Form
                  </a>
                </div>
              </div>
            </div>
          </form>
        </div>
      </div>

基础 PHP：

<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_subject = $_POST['subject'];
$field_message = $_POST['message'];

$mail_to = 'info@domain.com';
$subject = 'HailDark® User: '.$field_subject." - ".$field_name;

$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Subject: '.$field_subject."\n";
$body_message .= 'Message: '.$field_message;

$headers = 'From: '.$field_email."\r\n";
$headers = 'Reply To: '.$field_email."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
    <script language="javascript" type="text/javascript">
        alert('Thank you for the message. We will contact you shortly.');
        window.location = 'index.html';
    </script>
<?php
}
else { ?>
    <script language="javascript" type="text/javascript">
        alert('Message failed. Please, send an email to info@domain.com');
        window.location = 'index.html';
    </script>
<?php
}
?>

【问题讨论】：

标签： php html validation contact-form

【解决方案1】：

我看到您正在使用 HTML5，但还没有完全使用。你用过：

<input type="text" name="email" id="email" placeholder="Email" />

你可以使用

<input type="email" name="email" id="email" placeholder="Email" required="required"/>

Html5 提供了强大的方式来管理您的网站，就像上面我使用的type="email" 一样，它会自动验证电子邮件，并且required="required" 属性为您提供此字段不能为空，它将突出显示您。因此，首先在 <html> 标记之前使用 <!DOCTYPE html> 并使用 html5 标记并为要验证字段的每个标记使用 required="required" 属性。

【讨论】：

【解决方案2】：

<?php
if(empty($_POST['test'])) // other validation
{
    $error = true;
}
?>


<input type="text" name='test' class='<?php echo ($error)?"red-border":"green-border"; ?>' />
<input type='submit' value='send' />

<style type="text/css">
    .red-border{
        border: 1px solid red;
    }
    .green-border{
        border: 1px solid green;
    }
</style>

【讨论】：