Sujet Précédent Sujet Suivant

Verification d'un formulaire PHP

Fermé
Herozine Messages postés 52 Date d'inscription jeudi 19 juin 2014 Statut Membre Dernière intervention 17 avril 2015 - 25 janv. 2015 à 12:58
Herozine Messages postés 52 Date d'inscription jeudi 19 juin 2014 Statut Membre Dernière intervention 17 avril 2015 - 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/
A voir également:

1 réponse

Réponse 1 / 1
Zephirr Messages postés 317 Date d'inscription mardi 30 décembre 2014 Statut Membre Dernière intervention 6 novembre 2015 100
25 janv. 2015 à 15:06
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>
0
Herozine Messages postés 52 Date d'inscription jeudi 19 juin 2014 Statut Membre Dernière intervention 17 avril 2015 3
25 janv. 2015 à 16:53
Attend, tu est Zephirr le youtubeur ?
0
Herozine Messages postés 52 Date d'inscription jeudi 19 juin 2014 Statut Membre Dernière intervention 17 avril 2015 3
25 janv. 2015 à 16:59
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>
0
Herozine Messages postés 52 Date d'inscription jeudi 19 juin 2014 Statut Membre Dernière intervention 17 avril 2015 3
25 janv. 2015 à 17:06
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 317 Date d'inscription mardi 30 décembre 2014 Statut Membre Dernière intervention 6 novembre 2015 100
25 janv. 2015 à 17:20
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>
0
Zephirr Messages postés 317 Date d'inscription mardi 30 décembre 2014 Statut Membre Dernière intervention 6 novembre 2015 100 > Zephirr Messages postés 317 Date d'inscription mardi 30 décembre 2014 Statut Membre Dernière intervention 6 novembre 2015
25 janv. 2015 à 17:21
Les forms de type email sont vérifiées par la plupart des navigateurs.
0

Discussions similaires

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

1 réponse
Code de vérification TikTok non demandé
bobonaparte1066 -
Amine -

22 réponses
Google Chrome : "Nouvel envoi du formulaire"
beredezebe -
beredezebe -

3 réponses
Contact LEBONCOIN
myalysee -
MPMP10 -

3 réponses
Confirmation de l'envoi d'un formulaire html
Utilisateur anonyme -
0792198116 -

3 réponses