Validation Javascript des commentaires
Par défaut dans les blogs, quand on poste un commentaire invalide (un champ n'a pas été rempli, l'adresse électronique est invalide...) on arrive sur une page d'erreur. Cela a malheureusement les inconvénients:
- d'être souvent une page standard du blog, toute blanche, sans votre thème,
- de nécessiter le chargement d'une nouvelle page,
- puis il faut revenir à la page précédente pour corriger son commentaire.
Dans cet article je vais vous montrer comment vérifier les champs des commentaires sur votre blog instantanément en Javascript en affichant une boite de dialogue d'erreur s'il manque quelque chose. 
Cet ajout nécessite de modifier les fichiers de votre thème, mais rassurez-vous si vous n'êtes pas familier avec HTML et PHP, c'est très facile.
Du moins si vous avez un blog Wordpress puisque je vais faire l'explication pour lui. 
Cette modification est par contre inutile si vous avez déjà une extension comme AjaxComments qui modifie les commentaires par défaut.
~
Étape 1: le fichier Javascript
Tout d'abord, il faut ajouter un fichier Javascript. Voici un fichier de vérification de base.
Il faut l'enregistrer dans le répertoire /wp-content/plugins/ (ceci est bien sûr modifiable si vous savez le faire).
~
J'ai choisi de séparer chaque message d'erreur, et je considère que seul le nom et le commentaire sont obligatoires, les adresses courriel et URL sont facultatives. Si vous avez des extensions qui ajoutent des champs, on peut aussi les vérifier, mais à vous d'adapter à vos extensions.
Étape 2: inclusion dans le thème
Il faut maintenant utiliser ce fichier à votre thème. Allez dans /wp-content/themes/ puis dans le dossier de votre thème, éditez le fichier header.php pour ajouter juste avant </head>
<script type="text/javascript" src="/wp-content/plugins/commentaires.js"></script>
~
Ensuite dans comments.php, il ne devrait y avoir qu'une seule balise <form>. Recherchez la ligne ressemblant à:
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
Rajoutez à la fin de cette ligne, juste avant le > final, ceci:
onsubmit="javascript:return com(this)"
~
Vous n'avez plus qu'à envoyer sur votre site ces 2 fichiers modifiés et le fichier commentaire.js. J'ai fait cette modification sur ce site, vous pouvez donc tester ci-dessous que la validation affiche un message d'erreur s'il manque des informations.
Tutoriels reliés:
Cet article a été posté par David
le Mardi 25 novembre 2008 à 20:13
dans la catégorie HTML & CSS avec les mots clés: Astuce, Blog, Javascript, Programmation. Vous pouvez laisser une réponse, ou rétrolien depuis votre propre site.
