个人中心
gpt4 book ai didi

php - 如何在出现 PHP Echo 错误时更改 fa 图标的颜色？

转载 作者：行者123 更新时间：2023-11-28 06:37:14 24 4
gpt4 key购买 nike

我有一个在一些输入字段上显示错误消息的表单。

错误消息显示完美，但我试图在出现错误消息时更改字段中 fa 图标的颜色。

所以我想要实现的是当出现错误消息时图标变为红色。

我试过了

<?php echo "<div class='try' style='color: red;'>". $nameErr ."</div>"; ?>

但 fa 图标始终显示，而不是仅与错误消息一起出现。

我的表单:

<form method="post" name="contact-form" class="contact-form" id="contact-form" role="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">

    <div class="form-input-group">
        <i class="fa fa-male"></i><input type="text" class="" name="name" maxlength="80" placeholder="Full name">
    </div>

    <div class="form-input-group">
        <i class="fa fa-paper-plane"></i><input type="email" name="email" maxlength="30" placeholder="Email">
    </div>

    <div class="form-input-group">
        <i class="fa fa-phone"></i><input type="text" name="telephone" maxlength="15" placeholder="Phone number">
    </div>

    <div class="form-input-group">
        <i class="fa fa-calendar-o"></i><input type="text" name="event_date" maxlength="30" placeholder="Event date">
    </div>

    <div class="form-input-group">
        <i class="fa fa-users"></i><input type="text" name="guests" maxlength="30" placeholder="Guest amount">
    </div>

    <div class="form-input-group">
        <i class="fa fa-bullhorn"></i><input type="text" name="hear_about" maxlength="80" placeholder="How did you hear about us?">
    </div>

    <div class="form-input-group text-container">
        <i class="fa fa-envelope"></i><textarea name="message" class="text" maxlength="1000" cols="25" rows="6" placeholder="Message"></textarea>
    </div>

    <input type="submit" class="btn-fill form-btn" id="contact-submit" name="submit" value="Submit"> 

    <span class="error"><?php echo $nameErr;?></span>
    <span class="error"><?php echo $emailErr;?></span>
    <span class="error"><?php echo $telephoneErr;?></span>
    <span class="error"><?php echo $hear_aboutErr;?></span>
    <span class="error"><?php echo $messageErr;?></span>

</form>

我的 PHP

<?php

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

//if(isset($_POST['email'])) {

$subject = 'Website Contact Form Submission';

$message = "
    <html>
    <head>
    </head>
    <body>
    <table>
    <tr><td>Name:</td><td style=\"color: red;\"> ".$_POST["name"]."</td></tr>
    <tr><td>Email:</td><td style=\"color: red;\"> ".$_POST["email"]."</td></tr>
    <tr><td>Telephone:</td><td style=\"color: red;\"> ".$_POST["telephone"]."</td></tr>
    <tr><td>Event Date:</td><td style=\"color: red;\"> ".$_POST["event_date"]."</td></tr>
    <tr><td>Guests Amount:</td><td style=\"color: red;\"> ".$_POST["guests"]."</td></tr>
    <tr><td>Hear About:</td><td style=\"color: red;\"> ".$_POST["hear_about"]."</td></tr>
    <tr><td>Message:</td><td style=\"color: red;\"> ".$_POST["message"]."</td></tr>
     </table>
    </body>
    </html>
    ";                      


$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

$headers .= "From: ".$_POST["name"]." <".$_POST["email"].">\r\n";
$headers .= "Reply-To: ".$_POST["name"]." <".$_POST["email"].">\r\n";


mail("example@example.com",$subject,$message,$headers);

    $name = $_POST['name']; // required

    $email = $_POST['email']; // required

    $telephone = $_POST['telephone']; // not required

    $event_date = $_POST['event_date']; // not required

    $guests = $_POST['guests']; // not required

    $hear_about = $_POST['hear_about']; // required

    $message = $_POST['message']; // required


// define variables and set to empty values
$nameErr = $emailErr = $telephoneErr = $hear_aboutErr = $messageErr = "";
$name = $email = $telephone = $event_date = $guests = $hear_about = $message = "";

   if (empty($_POST["name"])) {
     $nameErr = "Name is required";
   } else {
     $name = test_input($_POST["name"]);
     // check if name only contains letters and whitespace
     if (!preg_match("/^[a-zA-Z ]*$/",$name)) {
       $nameErr = "Only letters and white space allowed"; 
     }
   }

// required
   if (empty($_POST["email"])) {
     $emailErr = "Email is required";
   } else {
     $email = test_input($_POST["email"]);
     // check if e-mail address is well-formed
     if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
       $emailErr = "*Invalid email format"; 
     }
   }

// not required
   if (empty($_POST["telephone"])) {
     $telephoneErr = "Incorrect telephone format";
   } else {
     $telephone = test_input($_POST["telephone"]);
     // check if telephone  is well-formed
     if ( preg_match( '/^[+]?([\d]{0,3})?[\(\.\-\s]?([\d]{3})[\)\.\-\s]*([\d]{3})[\.\-\s]?([\d]{4})$/', $string ) ) {
       $telephoneErr = "Invalid telephone format";
     }
   }

// not required
    if (empty($_POST["event_date"])) {
     $event_date = "";
   } else {
     $event_date = test_input($_POST["event_date"]);
   }

// not required
    if (empty($_POST["guests"])) {
     $guests = "";
   } else {
     $guests = test_input($_POST["guests"]);
   } 

// required
    if (empty($_POST["hear_about"])) {
     $hear_aboutErr = "*Please let us know where you heard about us";
   } else {
     $hear_about = test_input($_POST["hear_about"]);
   } 

// required
    if (empty($_POST["message"])) {
    $messageErr = "*Please enter a message";
   } else {
    if (strlen($_POST['message'])<6)
   {
    $messageErr = "*Message should be at least 6 characters";
   }
    else
   {
    $message = test_input($_POST["message"]);
  }
}

}

function test_input($data) {
   $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}

?>

我的 CSS

.fa-send::before, .fa-paper-plane::before {
    content:"\f1d8";
}
.form .contact-form .form-input-group i::after {
    border-right: 1px solid #e6e9ea;
    content: "";
    height: 30px;
    left: 30px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
}
.form .contact-form .form-input-group i.fa {
    font-size: 14px;
    color: #3eb489;
    margin-left: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

最佳答案

您的验证必须更专业，但既然您选择了这种方式，只需将以下指令添加到每个输入的容器 div 的样式列表中:例如，名称部分将如下所示:

<div class="form-input-group" style="<?php echo empty($nameErr)?' ':'color:red;'; ?>">
    <i class="fa fa-male"></i><input type="text" class="" name="name" maxlength="80" placeholder="Full name">
   </div>

要改进验证，为什么不使用 Javascript 验证作为第一个验证层，Jquery Validation例如。此验证不应取代后端验证，但它将是用户的第一级验证。

如果需要，为了提高后端验证的交互性，您可以创建一个独立的验证类，它返回带有错误代码的错误消息，对于字体图标颜色，通过具有相应字段名称的类来区分您的字体图标，然后使用一个相应地分配颜色的 Javascript 指令。

关于php - 如何在出现 PHP Echo 错误时更改 fa 图标的颜色？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34564499/

24 4 0
文章推荐： javascript - 在按键上添加背景颜色并淡出 javascript
文章推荐： JavaScript 在 DOM 中移动元素
文章推荐： javascript - 为什么方法 addStyleSheet 不会将我的 css 文件添加到我在 joomla 3.4 中的网页
文章推荐： javascript - 我怎样才能: Replace all instances of an old 'base' href on archived website with a new one for quick changeover?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com