Verification d'un formulaire PHP

Herozine Messages postés 52 Date d'inscription Statut Membre Dernière intervention -
Herozine Messages postés 52 Date d'inscription Statut Membre Dernière intervention - 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 - Guide
Formulaire de reclamation instagram - Guide
Easy php - Télécharger - Divers Web & Internet
Verification lien internet - Guide

1 réponse

Réponse 1 / 1

Zephirr Messages postés 317 Date d'inscription Statut Membre Dernière intervention 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 52 Date d'inscription Statut Membre Dernière intervention 3

Attend, tu est Zephirr le youtubeur ?

Herozine Messages postés 52 Date d'inscription Statut Membre Dernière intervention 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 52 Date d'inscription Statut Membre Dernière intervention 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 317 Date d'inscription Statut Membre Dernière intervention 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 317 Date d'inscription Statut Membre Dernière intervention 100 > Zephirr Messages postés 317 Date d'inscription Statut Membre Dernière intervention

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

Votre réponse

Discussions similaires