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

1 réponse

Zephirr Messages postés 320 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 58 Statut Membre 3

Attend, tu est Zephirr le youtubeur ?
0

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

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

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

Verification d'un formulaire PHP

1 réponse

Discussions similaires

Newsletters