Titre: Erreur dans un formulaire
Posté par: mitsukk1992 le le 22-07-2014 a 15:13:01
Bonjour,
Voici mon formulaire :
http://jsfiddle.net/Y4VU4/1/
J'aimerais que si l'utilisateur rentre un numéro de téléphone avec des lettres par exemple, un message d'erreur s'affiche.
A l'aide des expressions régulières j'ai réussi à faire ça et à insérer un message d'erreur, le problème c'est qu'il s'affiche sur une autre page alors que j'aimerais qu'il s'affiche sur la même page si possible à coté du champ "téléphone" et que ce champ de texte soit encadré en rouge, comme ici :
http://www.phpascal.com/programmatio...ormulaire.html
Sauf que je veux pas d'une alerte javascript
Pareil, si il ya plusieurs erreurs dans les champs à remplir, ces champs deviennent rouge avec le message d'erreur à coté.
Merci |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 22-07-2014 a 15:24:32
Modifier le CSS via du jquery pourrait répondre à ton problème.
Une astuce : crée différentes class dans ton css (input.normal, input.erreur)
Puis à l'aide de javascript, en cas d'erreur, tu modifie la class de l'input correspondant, et le tour est joué.
Pour les petits messages, tu as de nombreux choix.
Tu crées l'emplacement de chacun de ces messages (comme s'ils étaient affichés par défaut), puis tu mets un display:none; ou un width:0; + overflow:hidden;, et une autre class avec un display normal et un width/height désiré qu'il te suffit ensuite de changer avec du javascript.
Sinon, toujours en créant d'abord l'emplacement comme avant, mais tu modifie la taille (fermé/ouvert) avec un slideUp(0) / slideDown(0) en jquery (plus compliqué pour pas grand chose).
Je te conseille de manière générale de jouer avec les class css pour ne pas avoir à mettre de "style" dans le html. Switcher de class est très simple, surtout avec du jquery. |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 22-07-2014 a 15:25:36
| Et un "merci" (comme pour ta demande précédente) ne serait pas de refus, même si les solutions qui te sont proposés ne sont parfois pas bonnes à 100%. |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 22-07-2014 a 15:33:45
Ah vraiment désolé pour l'autre demande, j'avais résolu le problème et j'ai complétement oublié ce forum, merci à toi :).
Pour mon problème j'ai réussi à faire ça :
Code:
<html>
<head>
<script type="text/javascript">
function validate(xx)
{
var len = document.forms[0].elements.length;
for(var i = 0; i < len; i++)
{
if(document.forms[0].elements.type=="text" &&
document.forms[0].elements.id.indexOf('_obli')>-1 ) {
if (document.forms[0].elements.value.length=='') {
document.forms[0].elements.style.backgroundColor='#DBDBFF';
alert('champs obligatoire');
return false;
} else {
document.forms[0].elements.style.backgroundColor='#FFFFFF'
}
}
}
</script>
<title>Formulaire</title>
</head>
<body>
<form action="" onsubmit="return validate(this)">
<p>
<label for="firstname">First Name: </label>
<input type="text" name="firstname" value="" id="firstname_obli" required />
</p>
<p>
<label for="lastname">Last Name: </label>
<input type="text" name="lastname" value="" id="lastname_obli" required />
</p>
<p>
<label for="phone">Phone: </label>
<input type="text" name="phone" value="" id="phone" />
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
</body> |
|
Mais le problème c'est que j'aimerais afficher mes propres messages et non "Veuillez compléter ce champ." et que ce message soit à coté du champ de texte |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 22-07-2014 a 15:40:57
Comme dit, pour faire tes propres messages, vois ces messages comme des éléments à part entière (des <div> message </div> par exemple), existant par défaut à côté de chaque champ dans ton formulaire, mais invisible à l’œil. Tu les créées et tu n'as plus qu'à les rendre visible quand y'a une erreur, invisible sinon et le tour est joué.
Par ailleurs, je te conseille de tester le jquery. Le code est tellement plus simple, l'API est énorme, autant que les fonctionnalités sans avoir même besoin de coder, juste avec des petites fonctions toutes faites. Certes la page prend un peu de poids, mais ce n'est rien comparé au gain de temps et de poids fait par des fonctions très bien codées.
Enfin, à toi de voir ^^ |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 22-07-2014 a 15:46:29
Oh je comprends rien (gros débutant) je vais me contenter du code que j'ai inscrit précédemment ^^"
Merci quand même |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 22-07-2014 a 16:06:31
Je vais essayer de faire plus simple alors xD
imaginons ton formulaire :
<form action="" onsubmit="return validate(this)">
<p>
<label for="firstname">First Name: </label>
<input type="text" name="firstname" value="" id="firstname_obli" required />
</p>
<p>
<label for="lastname">Last Name: </label>
<input type="text" name="lastname" value="" id="lastname_obli" required />
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
tu vas rajouter des div comme ça :
<form action="" onsubmit="return validate(this)">
<p>
<label for="firstname">First Name: </label>
<input type="text" name="firstname" value="" id="firstname_obli" required />
<div class="message_ok">ALERT</div>
</p>
<p>
<label for="lastname">Last Name: </label>
<input type="text" name="lastname" value="" id="lastname_obli" required />
<div class="message_ok">ALERT</div>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
-------
Ensuite, dans ton css, tu définis 2 mises en forme :
.message_ok { ton_css_normal (display:none; par exemple) }
.message_erreur { ton_css_en_cas_d'erreur (display:block; pour le rendre de nouveau visible) }
-------
Enfin, en javascript, tu auras :
Si (erreur)
alors input-qui-contient-l'erreur => ajouter la class "message_erreur" à la div correspondante
sinon input-qui-ne-contient-pas-d'erreur => supprimer la class "message_erreur" de la div correspondante |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 23-07-2014 a 11:44:54
Merci de ton aide,
Dans ton exemple, j'ai toujours l'encadrée "Veuillez complétez ce champ" qui apparait or je voudrais qu'il n'y est pas cet encadré |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 23-07-2014 a 12:28:12
Tu as dû manquer cette partie là :
| .message_ok { ton_css_normal (display:none; par exemple) } |
|
display: none;
ou
width:0px; overflow:hidden;
permettent de cacher la div justement ;)
Afficher/cacher un élément grâce au css est une astuce fondamentale dans l'affichage dynamique compatible tout navigateur.
Cet article pourra t'aider, je te conseille de te pencher dessus : http://fr.openclassrooms.com/informatique/cours/tout-sur-le-javascript/le-css-via-js
Ou bien ce topic-là :
http://fr.openclassrooms.com/forum/sujet/div-cachervisible-htmlcss-18915 |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 23-07-2014 a 14:14:41
Merci à toi, j'ai réussi à le faire mais avec une autre méthode.
Mon formulaire est fait avec un tableau et j'aimerais le refaire sans ce tableau, pour commencer j'ai fais ça :
http://jsfiddle.net/BEpzq/1/
Le problème c'est que je n'arrive pas à centrer le tout, que le formulaire soit au milieu de ma page. |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 23-07-2014 a 14:30:13
Sémentiquement, ce formulaire est incorrect. Les input doivent se trouver dans des conteneurs de type balise <p>.
Ensuite, pour le centrer, un petit div autour de ton formulaire et margin:auto; ça passera facilement.
Quant aux <br/> On ne les utilise jamais pour faire du graphisme. On l'utilise pour un retour forcé au milieu d'une ligne éventuellement, mais pour distinguer 2 paragraphe, on utilisera quand même la balise <p> (margin:0; si on ne veut pas d'espace entre les deux paragraphes)
http://jsfiddle.net/BEpzq/7/
Voilà ton formulaire beaucoup plus propre. |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 23-07-2014 a 14:41:06
Merci pour ta patiente
J'aimerais juste que dans ton formulaire, les champs de textes soit séparé des labels, je sais pas si je suis claire (comme dans mon exemple : http://jsfiddle.net/BEpzq/1/ ) |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 23-07-2014 a 14:52:28
Pas trop d'intérêt je trouve, hormis pour les lecteurs d'écran, mais sinon c'est juste pratique pour les boutons radio/case à cocher (vu qu'on peut cliquer sur le texte au lieu du bouton), mais bon.
Voilà, tout simplement :
http://jsfiddle.net/BEpzq/9/
Petite correction, je viens de comprendre l'utilité de ton css :
http://jsfiddle.net/BEpzq/19/
Et oublie pas que tu peux modifier le css de tes input ;p
http://jsfiddle.net/BEpzq/29/ |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 24-07-2014 a 09:41:04
Merci,
Je l'ai fais de cette façon :
Code:
#table0{
margin: 6px 0px 0px 430px;
} |
|
|
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 24-07-2014 a 09:46:45
Dans ce cas, il ne sera pas centré, ton tableau.
avec un :
Code:
tu aura ta marge de 3px au-dessus et il sera centré. A toi de voir tes besoins. |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 24-07-2014 a 10:26:09
Quand j'utilise ton code :
Code:
J'ai bien mon tableau qui est centré mais les erreurs font reculer mon formulaire :
http://www.noelshack.com/2014-30-1406190179-sans-titre2.png
Or quand j'utilise mon bout de code, quand les erreurs s'affichent le formulaire ne bouge pas mais quand je modifie la taille de ma fenêtre, le formulaire se balade dans tous les sens.
Je pense que c'est mon code pour les erreurs qui n'est pas pratique :
Code:
$(document).ready(function(){
$("#formulaire").validate({
rules:
{
nom:
{
required: true,
},
prenom:
{
required: true,
},
},
messages:
{
nom:
{
required: " Le champ 'Nom' n'est pas rempli correctement.",
},
prenom:
{
required: " Le champ 'Prénom' est requis",
},
}
});
}); |
|
J'utilise cette librairie :
http://jqueryvalidation.org/
Pourrais tu me donner un exemple de la manière dont tu aurais affiché les erreurs avec le css seulement sur jsfiddle stp ? |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 24-07-2014 a 10:31:28
| Et merci pour la rapidité de tes réponses |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 24-07-2014 a 11:58:02
Ca fait plaisir de voir que t'as pas encore abandonné, j'ai cru que t'allais laisser tomber, à un moment ^^
Voilà un petit bout de code.
C'est un peu sale, mais ça marche.
Niveau css, faudrait retravailler un peu
Niveau javascript, faudrait rajouter 1 ou 2 fonctions, au lieu de répéter plusieurs fois el même code.
http://jsfiddle.net/BEpzq/64/
En gros l'idée, c'est d'ajouter en margin interne égal à la moitié de l'espace supplémentaire pris par le message d'erreur.
Mais sinon avec un tableau ou un alignement gauche, ça n'aurait pas posé de soucis. |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 24-07-2014 a 11:59:20
| Rien n'empêche ensuite de changer des fonctions où d'adapter à ta sauce. Je suis pas trop dedans là, j'ai fait un travail à la va-vite, donc fait pas un copier-coller brut du système. Retravaille-le un peu. |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 24-07-2014 a 12:29:37
Oui si je met mon formulaire à gauche je n'est pas ce problème là mais j'ai besoin qu'il soit au milieu.
Dans le lien que tu m'as donné, quand je soumet le formulaire sans remplir les champs rien ne se produit |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 24-07-2014 a 12:34:11
| Etrange, chez moi les textes d'erreur s'affichent et le formulaire est bloqué. Tu es sous quel navigateur ? |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 24-07-2014 a 12:38:14
Firefox
Edit : Sous IE ça marche |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 24-07-2014 a 12:42:50
Je pense que le site bug sous firefox.
Essaie sous chrome éventuellement, tu verras ça marche. |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 24-07-2014 a 12:46:22
| Quand je fais un copier coller du code, j'ai aucun message d'erreur qui s'affiche ni sur firefox ni sur IE :-\ |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 24-07-2014 a 13:30:56
| Me lâche pas stp j'y suis presque |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 24-07-2014 a 14:00:12
Tu bosses en local ou sur un serveur déjà ?
Ha mais, je ne sais pas si tu as remarqué, mais j'ai utilisé du jquery hein.
Il faut, si ce n'est pas fait, que tu récupère le fichier jquery :
http://code.jquery.com/jquery-1.11.1.min.js
Cette version est meilleure que la 2 dans le sens de la compatibilité.
Si tu ne t'intéresse pas à la compatibilité IE 6 à 8, tu peux prendre cette version là :
http://code.jquery.com/jquery-2.1.1.min.js
(dans ce second cas, faudra développer un petit bout de js pour bloquer ie 6 à 8 sur ton site)
Mais le premier lien conviendra tout à fait. |
Titre: Re:Erreur dans un formulaire
Posté par: mitsukk1992 le le 24-07-2014 a 14:15:41
Code:
<script src="js/jquery.js"></script>
<html>
<div id="conteneur">
<form>
<div class="champ"><p><label for="nom">Nom :</label><input type="text" id="nom" /></p><div class="message_ok" id="champ_nom">Le champ n'est pas rempli correctement</div></div>
<div class="champ"><p><label for="prenom">Prénom :</label><input type="text" id="prenom" /></p><div class="message_ok" id="champ_prenom">Le champ est requis</div></div>
<div class="champ"><p><input id="mon_test" type="submit" value="soumettre"/></p></div>
</form>
</html>
<script>
$("#champ_nom").removeClass("message_erreur");
$("#champ_prenom").removeClass("message_erreur");
$("#conteneur").removeClass("div_erreur"); $(".champ").removeClass("champ_erreur");
$("#mon_test").click(function(){
if($("#nom").val() == ""){
event.preventDefault(); $("#champ_nom").addClass("message_erreur"); $("#conteneur").addClass("div_erreur"); $(".champ").addClass("champ_erreur");
}
else{ $("#champ_nom").removeClass("message_erreur");
$("#conteneur").removeClass("div_erreur"); $(".champ").removeClass("champ_erreur");
}
if($("#prenom").val() == ""){
event.preventDefault(); $("#champ_prenom").addClass("message_erreur");
$("#conteneur").addClass("div_erreur"); $(".champ").addClass("champ_erreur");
}
else{
$("#champ_prenom").removeClass("message_erreur");
$("#conteneur").removeClass("div_erreur"); $(".champ").removeClass("champ_erreur");
}
});
</script>
<style>
div{
width:180px;
margin:0 auto;
}
.div_erreur{
width:550px;
}
p{
display:inline;
}
label{
display:block;
float:left;
width:70px;
}
input {
width:100px;
}
.champ{
height:30px;
}
.champ_erreur{
margin-left:185px;
width:550px;
}
.message_ok{
color:#b00;
float:right;
height:30px;
width:330px;
display:none;
}
.message_erreur{
display:block;
}
</style> |
|
Ca ne fonctionne pas, je bosse sur un serveur |
Titre: Re:Erreur dans un formulaire
Posté par: Chimnei le le 24-07-2014 a 14:24:54
Ha bah si tu bosses sur serveur, tu peux me donner l'url du site sur lequel tu bosses ? Je pourrais peut-être mieux comprendre pourquoi ça ne marche pas ^^
Par ailleurs, pense à mettre le javascript et le css toujours au-dessus du html (généralement dans le header) autant que possible. C'est peut-être ça qui te fais buguer.
en outre, pour être aux normes, la balise <script> doit être renseignée comme ceci :
<script type="text/javascript">
</script>
(idem pour le css : <style type="text/css"> </style>) |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|