I have a form that displays error messages on a few of the input fields.
The error messages display perfectly, but I am trying to change the color of my fa icon in the field when its error message appears.
So what I want to achieve is that the icon turns red when its error message appears.
I tried
<?php echo "<div class='try' style='color: red;'>". $nameErr ."</div>"; ?>
but the fa icon is always displayed instead of only appearing with the error message.
My Form:
<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>
My 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" . "
";
$headers .= "Content-type:text/html;charset=UTF-8" . "
";
$headers .= "From: ".$_POST["name"]." <".$_POST["email"].">
";
$headers .= "Reply-To: ".$_POST["name"]." <".$_POST["email"].">
";
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;
}
?>
My 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%);
}
