Pluxopolis

Tout savoir pour devenir un pro de PluXml, mais pas seulement...

Validation des commentaires en jQuery

Rédigé par jack le 2 commentairese


Avec ce tutoriel nous allons voir comment valider en jQuery les champs de saisie du formulaire des commentaires. L'objectif est d'afficher des messages "Champ obligatoire", "Adresse email invalide", "Url invalide" lorsque les critères de saisie ne seront pas corrects.

Pour la démo, j'utilise: Mode d'emploi...

Pré-requis

Commencez par téléchargez les fichiers jquery.min.js et jquery.validate.min.js
Déposez ces fichiers dans le dossier de votre thème: themes/defaut/js/

Installation

Editez le fichier header.php de votre thème.
Avant la ligne </head>, ajoutez le code suivant:

<?php if($plxShow->mode()=='article') : ?>
<!-- <comments validation> -->
<script src="https://pluxopolis.net/<?php $plxShow->template(); ?>/js/jquery-1.10.2.min.js"></script>
<script src="https://pluxopolis.net/<?php $plxShow->template(); ?>/js/jquery.validate.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
	$("#commentform").validate({
		messages: {
			name: "Champ obligatoire",
			site: "Url invalide",
			mail: {
				required: "Champ obligatoire",
				email: "Adresse email invalide"
			},
			content: "Champ obligatoire"
		}
	});
});
</script>
<style type="text/css">
#commentform label.error {
	width: auto;
	display: block;
	color: #ff0000;
	margin:5px 0;
	padding:0;
	font-size: 11px;
}
#commentform p {
	margin-top: 15px;
}
input, textarea {
	margin: 0 !important;
}
</style>
<!-- </comments validation> -->
<?php endif; ?>

Editez le fichier commentaires.php de votre thème.
Supprimer les lignes suivantes,

		<form action="<?php $plxShow->artUrl(); ?>#form" method="post">
			<fieldset>
				<p><label for="id_name"><?php $plxShow->lang('NAME') ?> :</label></p>
				<p><input id="id_name" name="name" type="text" size="20" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" />
				</p>
				<p>
					<label for="id_site"><?php $plxShow->lang('WEBSITE') ?> :</label>
				</p>
				<p>
					<input id="id_site" name="site" type="text" size="20" value="<?php $plxShow->comGet('site',''); ?>" />
				</p>
				<p>
					<label for="id_mail"><?php $plxShow->lang('EMAIL') ?> :</label>
				</p>
				<p>
					<input id="id_mail" name="mail" type="text" size="20" value="<?php $plxShow->comGet('mail',''); ?>" />
				</p>
				<p>
					<label for="id_content" class="lab_com"><?php $plxShow->lang('COMMENT') ?> :</label>
				</p>
				<p>
					<textarea id="id_content" name="content" cols="35" rows="6"><?php $plxShow->comGet('content',''); ?></textarea>
				</p>
				<p class="com-alert">
					<?php $plxShow->comMessage(); ?>
				</p>
				<p>
					<?php if($plxShow->plxMotor->aConf['capcha']): ?>
					<label for="id_rep"><strong><?php echo $plxShow->lang('ANTISPAM_WARNING') ?></strong> :</label>
				</p>
				<p>
					<?php $plxShow->capchaQ(); ?> : <input id="id_rep" name="rep" type="text" size="10" />
					<?php endif; ?>
				</p>
				<p>
					<input type="submit" value="<?php $plxShow->lang('SEND') ?>" />
				</p>
			</fieldset>
		</form>
et remplacez les par le code suivant: 

		<form action="<?php $plxShow->artUrl(); ?>#form" method="post" id="commentform">
			<fieldset>
				<p>
					<label for="id_name"><?php $plxShow->lang('NAME') ?> :</label></p>
					<input class="required" id="id_name" name="name" type="text" size="20" value="<?php $plxShow->comGet('name',''); ?>" maxlength="30" />
				</p>
				<p>
					<label for="id_site"><?php $plxShow->lang('WEBSITE') ?> :</label>
					<input class="url" id="id_site" name="site" type="text" size="20" value="<?php $plxShow->comGet('site',''); ?>" />
				</p>
				<p>
					<label for="id_mail"><?php $plxShow->lang('EMAIL') ?> :</label>
					<input class="required email" id="id_mail" name="mail" type="text" size="20" value="<?php $plxShow->comGet('mail',''); ?>" />
				</p>
				<p>
					<label for="id_content" class="lab_com"><?php $plxShow->lang('COMMENT') ?> :</label>
					<textarea class="required" id="id_content" name="content" cols="35" rows="6"><?php $plxShow->comGet('content',''); ?></textarea>
				</p>
				<p class="com-alert">
					<?php $plxShow->comMessage(); ?>
				</p>
				<p>
					<?php if($plxShow->plxMotor->aConf['capcha']): ?>
					<label for="id_rep"><strong><?php echo $plxShow->lang('ANTISPAM_WARNING') ?></strong> :</label>
				</p>
				<p>
					<?php $plxShow->capchaQ(); ?> : <input id="id_rep" name="rep" type="text" size="10" />
					<?php endif; ?>
				</p>
				<p>
					<input type="submit" value="<?php $plxShow->lang('SEND') ?>" />
				</p>
			</fieldset>
		</form>

Sauvegardez les fichiers. Voilà notre système de validation est en place.

Explications

Au niveau du formulaire des commentaires, nous avons mis en place poour la balise <form> un id 

id="commentform"

Nous avons rajouté pour les champs à controler une classe avec les mots clés gérés par le script de validation.

Exemple: pour le champ Vote nom ou votre pseudo 

class="required"
Le mot clé required impose la saisie obligatoire.

Exemple: pour le champ Votre site Internet 

class="url"
Le mot clé url impose la saisie d'une url valide.

Exemple: pour le champ Votre adresse e-mail 

class="required email"
Le mot clé required impose la saisie obligatoire, et le mot clé email impose une adresse email valide.

Toutes la liste des mots clés sont disponibles sur la page de documentation du plugin: Documentation

Les messages à afficher en cas d'erreurs sont spécifiés avec le bout de code suivante 

<script type="text/javascript">
$(document).ready(function(){
	$("#commentform").validate({
		messages: {
			name: "Champ obligatoire",
			site: "Url invalide",
			mail: {
				required: "Champ obligatoire",
				email: "Adresse email invalide"
			},
			content: "Champ obligatoire"
		}
	});
});
</script>

Le comportement visuel des messages (couleur rouge, positionnement en dessous des champs) est fait avec ce code: 

<style type="text/css">
#commentform label.error {
	width: auto;
	display: block;
	color: #ff0000;
	margin:5px 0;
	padding:0;
	font-size: 11px;
}
#commentform p {
	margin-top: 15px;
}
input, textarea {
	margin: 0 !important;
}
</style>
Le code css peut être déporté dans le fichier style.css de votre thème.

Petite remarque: afin de ne prendre en compte la validation que lors de la visualisation d'un article, je fais un test sur le mode d'affichage en cours pour ne charger les scripts et le code nécessaire qu'en mode article 

<?php if($plxShow->mode()=='article') : ?>
...
<?php endif; ?>

En cas de problèmes

Quelques pistes à vérifier si le système de validation des commentaires ne fonctionne pas:
  • Est-ce que les fichiers jquery.min.js et jquery.validate.min.js sont bien présents dans le dossier themes/defaut/js ?
  • Est-ce que jquery est utilisé plusieurs fois sur votre site, où plusieurs versions différentes viendraient en conflit ? Veuillez à n'avoir jquery de charger qu'une seule fois.
  • Utilisez-vous le plugin jquery qui viendrait en conflit avec jQquery 1.10.2 chargé au début de la page header.php
  • Avez-vous bien respecter la procédure d'installation et le copier-coller
  • Si les messages d'erreurs s'affichent mal, les propriétés css rentrent peut-être en conflit avec celles de votre feuille de style (fichier style.css)
N'hésitez pas à tester le système de validation des commentaires avec le thème par défaut de PluXml pour vous assurez qu'il est opérationnel et comprendre son fonctionnement. Cela vous sera plus facile pour l'adapter et l'intégrer à votre site. Les problèmes sont souvent liés à l'organisation de votre thème.

DClassé dans : PluXml ,Mots clés : Commentaires, jQuery, Programmation, Tuto, Validation

A propos de l'auteur, jack:

Webmestre de PluXopolis de 2018 à Avril 2023.

2 commentaires

routch a dit : #1

super le système de commentaire

Jango a dit : #2

Bonjour. Je suis en formation sur http://www.alphorm.com/tutoriel/formation-en-ligne-jquery en ce moment pour apprendre les fonctionnalités de JQuery. Je vais mettre en compte votre site car ça m’intéresse beaucoup.

rFil RSS des commentaires de cet article

Les commentaires sont fermés.

Top