Good way of displaying form validation errors in php as input placeholder without Javascript

310 Views Asked by At

I'm trying to display errors on form validation as the placeholder in the input box.

Right now I have this HTML/PHP code:

<input type="text" name="name" id="name" placeholder="Enter first name"
class="<?php if(isset($error['name'])){echo "error-found";} else { echo "no-error";} ?>"
value="<?php if(isset($error)){ echo htmlspecialchars($_POST['name'], ENT_QUOTES); } ?>" tabindex="1">

and CSS:

.error-found[type=text]:focus{
    color: inherit;
}
.error-found[type=text]{
    color:red;
}

When error is found the color of the placeholder text changes to red. When user goes to the input box and writes something it turns to inherit color but when user goes to the next box / on focus out, the color changes to red again, which is not what I want.

Is there a way through PHP/CSS/HTML, without using Javascript to have the color not change to red on focus out and only if text is entered in the input box ?

1

There are 1 best solutions below

3
Karthick On

Did you try below CSS script?

.error-found[type=text]:not(:focus){
    color: inherit;
}