我有一个在一些输入字段上显示错误消息的表单。
错误消息显示得很好，但当错误消息出现时，我正试图更改字段中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验证。此验证不应取代后端验证，但它将是用户的第一级验证。
如果需要，为了提高后端验证的交互性，您可以创建一个独立验证类，该类返回带有错误代码的错误消息。对于字体图标的颜色，请通过具有相应字段名称的类来区分字体图标，然后使用一条Javascript指令来相应地分配颜色。