Verification d'un formulaire PHP

Herozine Messages postés 58 Statut Membre -
Herozine Messages postés 58 Statut Membre - 25 janv. 2015 à 19:45

Bonjour, j'ai une question. J'ai commencé à programmer un formulaire en Material Design.

Voici un screen du résultat :
Quand l'input est non séléctionné :

Quand l'input est séléctionné :

Je voudrais faire en gros que quand le résultat est bon on peut voir ce type de réponse :

Et quand il y a une erreur :

Voici ce que j'ai déjà programmé :
HTML :

 <form action="index.html">
 <div class="formL">
 <div class="ax">
  <div class="ax-input">
  <input type="email" id="email" name="email" class="ax-input-text"><img src="call.png">
 </div>
 </div>
</div>
</form>

CSS:

.formL{
 background-color: #333333;
 width: 380px;
 height: auto;
 padding: 5px;
 position: relative;
 left: 150px;
 top: 150px;
 outline: none;

}
*{
 padding: 0px;
 margin: 0px;
}
@font-face {
    font-family: Roboto;
    src: url(Roboto.tff);
}
.ax{
 height: 72px;
 position: relative;
 padding: 16px 0px 8px 0px;
 left: 15px;
 width: 350px;
 outline: none;
}
.ax-input-text{
 background: transparent;
 line-height: 8px 0;
 padding: 8px 0;
 border:none;
 -webkit-appearance:none;
 display: block;
 width: 100%;
 font-family: Roboto;
 font-size: 16px;
 outline: none;
 color: #717171;
 position: relative;
 border-bottom:solid #717171 2px;
}
.ax-input img{
 bottom: 52px;
 position: absolute;
 height: 16px;
 right: 20px;
 outline: none;
}


.ax-input-text:focus{
 border-bottom:solid skyblue 2px;
 outline: none;
}

Merci d'avance. Herozin

PS : Pour ceux qui veulent voici le lien des icons Material Design :
https://www.materialpalette.com/icons
Pour les règles de Material Design :
https://material.io/design/introduction/

Afficher la suite

A voir également:

Verification d'un formulaire PHP
Whatsapp formulaire opposition - Guide
Formulaire de réclamation facebook compte désactivé - Guide
Formulaire de reclamation instagram - Guide
Verification lien internet - Guide
Easy php - Télécharger - Divers Web & Internet

1 réponse

Réponse 1 / 1

Zephirr Messages postés 389 Statut Membre 100

Un petit js:

<script>
function verifEmail () {
  if(document.getElementById("email").value.length > 8)
  {
    document.getElementById("email").style.borderBottom = "solid Red 2px";
    window.alert("sometext");
  }
}
</script>

<form action="index.html">
 <div class="formL">
 <div class="ax">
  <div class="ax-input">
  <input type="email" id="email" name="email" class="ax-input-text" oninput="verifEmail()"><img src="call.png">
 </div>
 </div>
</div>
</form>

Herozine Messages postés 58 Statut Membre 3

Attend, tu est Zephirr le youtubeur ?

Herozine Messages postés 58 Statut Membre 3

Merci de ta réponse mais ca ne marche pas.
Voici tout le code :


<script>
function verifEmail () {
  if(document.getElementById("email").value.length > 8)
  {
    document.getElementById("email").style.borderBottom = "solid Red 2px";
    window.alert("Please enter your email");
  }
}
</script>

<form action="index.html">
 <div class="formL">
 <div class="ax">
  <div class="ax-input">
  <input type="email" id="email" name="email" class="ax-input-text" oninput="verifEmail()"><img src="call.png">
 </div>
 </div>
</div>
</form>
<style type="text/css">
.formL{
 background-color: #333333;
 width: 380px;
 height: auto;
 padding: 5px;
 position: relative;
 left: 150px;
 top: 150px;
 outline: none;

}
*{
 padding: 0px;
 margin: 0px;
}
@font-face {
    font-family: Roboto;
    src: url(Roboto.tff);
}
.ax{
 height: 72px;
 position: relative;
 padding: 16px 0px 8px 0px;
 left: 15px;
 width: 350px;
 outline: none;
}
.ax-input-text{
 background: transparent;
 line-height: 8px 0;
 padding: 8px 0;
 border:none;
 -webkit-appearance:none;
 display: block;
 width: 100%;
 font-family: Roboto;
 font-size: 16px;
 outline: none;
 color: #717171;
 position: relative;
 border-bottom:solid #717171 2px;
}
.ax-input img{
 bottom: 52px;
 position: absolute;
 height: 16px;
 right: 20px;
 outline: none;
}


.ax-input-text:focus{
 border-bottom:solid skyblue 2px;
 outline: none;
}

</style>

Herozine Messages postés 58 Statut Membre 3

J'ai pigé un truc, ca marche que quand l'email dépasse 8 caractères, mais le truc c'est qui faudrait l'inverse. Un message que quand c'est moins de 8 caractères
.

Zephirr Messages postés 389 Statut Membre 100

C'était un exemple.
Voici un code qui te conviendra plus :

<script>
function verifEmail () {
  var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');

  if(!reg.test(document.getElementById("email").value))
  {
    document.getElementById("email").style.borderBottom = "solid Red 2px";
  }
  else
  {
    document.getElementById("email").style.borderBottom = "solid Green 2px";
  }
}
</script>

Zephirr Messages postés 389 Statut Membre 100 > Zephirr Messages postés 389 Statut Membre

Les forms de type email sont vérifiées par la plupart des navigateurs.

Discussions similaires

Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire

Vérification de l’identité du serveur impossible sur IPHONE

Code de vérification TikTok non demandé

Contact LEBONCOIN

Verification d'un formulaire PHP

1 réponse

Votre réponse

Discussions similaires

Newsletters