[Résolu] Les "label" recouvrent les "input" !

Bonjour à tous...

Pour faire une petite animation dans un formulaire de contact, j'ai suivi un tuto sur les Input en Material Design (ici : https://youtu.be/hXLDI7xr4-w) et je
rencontre un problème en essayant d'intégrer le principe dans mon site.
J'ai la bonne idée d'envoyer le formulaire en method="post" vers une page 'envoi.php qui vérifie les données saisies et retourne sur la page du formulaire en cas de problème (comme sur la non validation du Re-Captcha par exemple). Le souci est que les données saisies par l'utilisateur sont bien présentes au retour dans tous les champs du formulaire grâce à $nom=$_SESSION['nom']; mais les label viennent recouvrir ces données
comme si les input étaient vides.
Il suffit pour régler le souci de cliquer sur le champ pour que le label se place en hauteur, mais ce n'est pas très esthétique ! Je pense que le problème vient de Javascript mais je n'ai aucune (compétence) idée de comment tourner le code pour lui faire prendre conscience qu'au retour sur la page il y a déjà qqchose dans les champs !

Si ça peut aider : https://codepen.io/Etienne69/pen/WNNLPdJ

Voici des bouts de code :
Merci pour votre aide !

Fichier contact.php :

. . .
<form method="post" action="envoi.php">
    <div class="field">
        <label for="doge" class="field-label">Nom</label>
         <input required="" type="text" name="nom" id="name"
                        value ="<?php echo $nom;?>" class="field-input">
    </div>
</form>
. . .
<script src="js/formulaire.js"></script>

Fichier formulaire.js (en entier) :

jQuery(function($) {
  $(".field-input").focus(function() {
    $(this)
      .parent()
      .addClass("is-focused has-label");
  });

  $(".field-input").blur(function() {
    $parent = $(this).parent();
    if ($(this).val() == "") {
      $parent.removeClass("has-label");
    }
    $(this);
    $parent.removeClass("is-focused");
  });
});

Et un bout du CSS :

/* ---------------------------------------------------------------------- */
/*	07. Formulaire contact
/* ---------------------------------------------------------------------- */
.contact-form {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  font-size: 16px;
  background-color: rgb(84, 77, 68);
  padding: 20px;
  width: 80%;
  margin: 0 auto;
  box-shadow: 2px 2px 6px 0px rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}

.contact-form article {
  width: 100%;
}

.contact-form aside {
  margin-right: 20px;
}

.contact-form aside img {
  height: 500px;
}

label {
  font-weight: bold;
}

.field {
  position: relative;
  height: 72px;
  padding: 16px 0 8px 0;
}

.field em {
  font-size: 12px;
  color: #cec4c4;
}

.field-label {
  position: relative;
  margin: 0;

  color: #f8e4bd;
  line-height: 16px;
  font-size: 18px;
  font-weight: bold;
  display: block;
  transform: translateY(24px);
  transition: transform 0.3s;
  transform-origin: 0 50%;
}

.field-input:focus {
  color: rgb(84, 77, 68);
}

.field-input {
  position: relative;
  display: block;
  width: 100%;
  height: 32px;
  padding: 8px 0;
  line-height: 16px;
  font-family: "Open Sans";
  font-size: 18px;
  background-color: transparent;
  border: none;
  -webkit-appearance: none;
  outline: none;
  color: #f1c05c;
  font-weight: bold;
  padding-left: 3px;
}

.field::after,
.field::before {
  content: "";
  height: 2px;
  width: 100%;
  position: absolute;
  bottom: 6px;
  left: 0;

  background-color: #f8e4bd;
  transition: height 0.3s;
}

.field::after {
  background-color: #f1c05c;
  transform: scaleX(0);
  transition: transform 0.3s;
}

.has-label .field-label {
  transform: translateY(0) scale(0.55);
}

.is-focused .field-label {
  color: #f1c05c;
}


.field.is-focused::after {
  transform: scaleX(1);

}

.field.is-focused::before {
  height: 32px;
}

Modifié par etienne69 (18 Nov 2019 - 20:19)

Merci pour ton aide aliasdmc, mais ça ne fonctionne pas, en tous cas en php...
(J'avais une erreur PHP sur !empty($nom;)) J'ai enlevé le ; après $nom, je n'ai plus d'erreur PHP, mais label ecrase toujours input au retour de validation refusée !

Pour ce qui est du Javascript, ton code doit remplacer quelle partie du code initial ?


https://codepen.io/Etienne69/pen/WNNLPdJ
Modifié par etienne69 (18 Nov 2019 - 19:56)

Désolé aliasdmc, ton code fonctionne parfaitement, mauvaise manip de ma part !
Tu es super !
Merci beaucoup !


(Je l'ai fait en php car en Javascript je ne maîtrise pas assez !)
Modifié par etienne69 (18 Nov 2019 - 20:21)