Les labels animés recouvrent les input !

Etienne69
Javascript

Bonjour à tous...

J'ai suivi le tuto de Grafikart sur les Input en Material Design (https://youtu.be/hXLDI7xr4-w) et je
rencontre plusieurs problèmes en essayant de l'intégrer le principe dans mon site :
1 - 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
dans tous les champs grâce à $nom=$_SESSION['nom']; mais les label viennent recouvrir ces données
comme s'ils étaient vides. Il suffit 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 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 !

Je vous ferai part des autres problème quand j'aurai résolu celui là...

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");
  });
});

Merci d'avance pour votre aide !

3 réponses

Etienne69
Auteur
Réponse acceptée

Je viens de recevoir une aide pour résoudre mon problème par du PHP : 

<div class="field <?php if(!empty($nom)){echo "has-label";}?>">
Etienne69
Auteur

Un bout de mon formulaire

<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>

Et le 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;
}
Etienne69
Auteur

https://codepen.io/Etienne69/pen/WNNLPdJ