Problème fonction js
Salut les chouals développeur,
j'ai enfin fini mon petit portfolio, et j'ai décidé de tenter d'inclure du js dedans, pour mon formulaire de contact, le truc tout con, si t'oublies ton mail/tel/etc.. ça te le dit.
Le truc c'est que j'arrive pas à faire en sorte que justement, ça te le dise, j'vous met mon code html/php/js.
html:
http://pastebin.com/2vgwLTHc
php:
http://pastebin.com/v9yTW2vY
js:
http://pastebin.com/9e07nqu7
Je pense que ça vient du faire que je redirige vers index.php, et que du coup le css de base se recharge, j'aimerais donc savoir comment lancer le js avant d'arriver sur le php, en lui envoyant mes variables qui sont en input, afin que quand il clique sur "Envoyer", ça lui dise les champs oubliés, sans que la page se recharge, que les div "d'oubli" pop.
Merci d'avance à ceux qui prendront le temps de m'aider !
Oublie l'affichage du <script/> en PHP car là tu ne fait pas d'ajax. Ta fonction afficherOubliNom peut être modifiée pour vérifier que chaque champs est rempli et si l'un d'entre eux ne les pas, tu affiche le message correspondant en gros :
if (document.getblablaId('name').value == '') { afficher le message };
Enfin, la fonction afficherOubliNom doit être appellée par l'event "submit" du formulaire et doit retourner false si tu ne veut pas que le formulaire s'envoi (en cas d'oubli) et true sinon. Tu a plusieurs manières d'attribuer cette fonction à cet event
Soit dans le code HTML :
<form blablabla onsubmit="return afficherOubliNom();">
Soit en JS:
document.getblablaid("formulaire").addEventListener("submit", afficherOubliNom);
Renseigne toi sur la fonction preventDefault tu risque d'en avoir besoin.
@Benji: Merci beaucoup,j'ai donc comme code js:
http://pastebin.com/hStheAYQ
avec mon form : <form action="mail/contact_me.php" method="post" id="contactForm" onsubmit="return afficherOubliNom();">
Seulement ça continue d’aller directement sur contact_me.php directement, même avec les champs vides
@WoAw: avec le onsubmit="..." sur le form, tu fais un "return false;" dans ton JS pour annuler le submit (donc quand y'a une erreur) et "return true;" quand tu veux submit (donc pas d'erreur).
genre <form onsubmit="return foo();">
function foo () {
if (bar.value == '') {
return false;
}
return true;
}
Pourquoi tu n'utilises pas l'attribut "required" dans tes inputs ? Cela bloque l'envoi du form en cas de champs (avec l'attribut en question) non remplis.
Regarde la section required: https://www.w3.org/wiki/HTML5_form_additions#required
@Ferrus: Oui je l'avais vu mais j'ai l'impression que tu ne peux pas personnaliser la réponse et la "styliser" comme tu peux le faire avec des div.
En tous cas merci beaucoup, la fonction js fonctionne désormais !
@Ferrus: attention le required n'est pas supporté par IE9 et < par ex (mal par certains autres browsers) http://caniuse.com/#feat=form-validation
Après tout dépend si il en a rien à foutre des IE9 ou pas ^^
@daftdef: Microsoft arrête le support de IE 8, 9, 10 et va pousser a l'upgrade, du coup ce n'est pas un problème
EDIT: Et Safari on s'en tape
http://www.theverge.com/2016/1/6/10722426/internet-explorer-8-9-10-dying
@Ferrus: Certes Crosoft arrête le support, ça ne veut pas dire pour autant qu'il n'y aura plus de IE8-9 sur le marché ! Il n'y a qu'à voir combien il reste d'XP encore. C'est pour ça que je dis : tout dépend un peu de ce qu'il veut faire comme site et avec quelle portée. Dans ma boite, on se tape encore la compatibilité pour IE9 et IE8 (et crois-moi bien que ça me fait bien chier !)
Tu ne dois accéder à ce site que si tu as au moins 18 ans ou si tu as l'âge légal pour visionner ce type de matériel dans ta juridiction locale, l’âge le plus élevé étant retenu. En outre, tu déclares et garantis que tu ne permettras aucun mineur à d'accéder à ce site ou à ces services.
En accédant à ce site, tu acceptes nos conditions d'utilisation.