Animation INPUT :valid :placeholder-shown

Je me suis heurté aujourd'hui à un problème. Je cherchais à faire une animation de formulaire pour le rendre plus interactif. Je suis passé ensuite à la partie PHP de mon formulaire mais je me suis rendu compte que l'attribut required dans mes inputs m’empêchait de faire un retour PHP si l'utilisateur n'avait pas complété les champs. Cela m'affiche une petite fenêtre que je ne cherche pas du tout à avoir. Cependant sans le required mon animation ne se ferait pas car cet attribut permet au CSS de savoir si le champ est plein ou non. Je suis à la recherche de toute bonne idée ou astuces.

MON CODE :

HTML :

<div class="form-content">
    <form action="" method="post">
        <div class="form">
            <input type="mail" name="form_email" autocomplete="off" placeholder="" required>
            <label for="form_email" class="label-name">
                <span class="content-name">Adresse e-mail</span>
            </label>
        </div>
    </form>
</div>

CSS :

.form-content {
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    width: 100%;
    height: 100%;
    padding: 0px 0px 5px 20px;
}
 
form {
    width: 100%;
}
 
.form-box {
    display: flex;
    justify-content: space-between;
}
 
.form-box .form {
    width: 45%;
}
 
.form {
    width: 100%;
    position: relative;
    height: 50px;
    overflow: hidden;
    margin-bottom: 10px;
}
 
.form input {
    width: 100%;
    height: 100%;
    background-color: transparent;
    color: #fff;
    padding-top: 20px;
    border: none;
    outline: none;
    font-size: 18px;
    font-family: montserrat-light;
}
 
.form label {
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    pointer-events: none;
    color: #fff;
    border-bottom: 1px solid #fff;
    font-family: montserrat-light;
}
 
.form label i {
    color: #c7c7c7;
}
 
.form label::after {
    content: '';
    position: absolute;
    left: 0px;
    bottom: -1px;
    height: 100%;
    width: 100%;
    border-bottom: 3px solid #fff;
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}
 
.content-name {
    position: absolute;
    bottom: 5px;
    left: 0px;
    transition: all 0.5s ease;
}
 
.form input:focus+.label-name .content-name,
.form input:valid+.label-name .content-name {
    transform: translateY(-150%);
    font-size: 14px;
    color: #fff;
}
 
.form input:focus+.label-name::after,
.form input:valid + .label-name::after {
    transform: translateX(0%);
}

Bonjour,

Tu peux peut-être remplacer tes deux input:valid par des input:not(:placeholder-shown) tout en ajoutant un espace comme valeur de placeholder, et alors tu pourras supprimer tes required (ou ne plus miser sur eux pour faire ton animation).

Ajouter un vrai placeholder (au lieu d'un espace) est surement possible aussi (il suffit ensuite de le styler convenablement).

Tous les navigateurs n'auront peut-être pas tout à fait le même comportement dans toutes les situations : à tester.

Amicalement,