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 !

Poster un commentaire
Appineos
Appineos
8 ans

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.

WoAw
WoAw
8 ans

@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

Divi
Divi
8 ans

@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;
}

WoAw
WoAw
8 ans

@Divi: Merci beaucoup ça marche !

Ferrus
Ferrus
8 ans

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

WoAw
WoAw
8 ans

@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 !

daftdef
daftdef
8 ans

@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 ^^

Ferrus
Ferrus
8 ans

@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

IMG
daftdef
daftdef
8 ans

@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 !)

Commentaire supprimé.

Commentaire supprimé.

Cette page est réservée aux ADULTES

Tu es sur le point d'accéder à un site web qui contient du matériel explicite (pornographie).

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.