Как изменить цвет значка fa при появлении ошибки PHP Echo?
У меня есть форма, которая отображает сообщения об ошибках в нескольких полях ввода.
Сообщения об ошибках отображаются отлично, но я пытаюсь изменить цвет моего значка 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("[email protected]",$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 для назначить цвета соответственно.
Другие решения
Других решений пока нет …