Jquery validate pour form avec textarea

bonjour,
j'utilise Jquery Validate pour valider mon formulaire.
A l'intérieur de ce formulaire, je permet l'ajout de lignes de tableau en dynamique de manière à pouvoir créer plusieurs entrées.

voici le code javascript :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script src="ressources/javascript/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" src="ressources/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$().ready(function() {
 
	//Affichage ligne supplementaire
	var template = jQuery.format($("#template-probleme").val());
	function addRowMessage() {
		$(template(n++)).appendTo("#ligne-probleme tbody");
	}
 
	var n = 1;
	// start with one row
	addRowMessage();
	// add more rows on click
	$("#add-probleme").click(addRowMessage);
});
</script>

Le template de mon ajout de ligne avec une balise textarea

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- js dynamique!-->
					<textarea style="display:none" id="template-probleme">
 
						<tr>
							<td valign="top">
								<label>{0}. </label>
							</td>
							<td>
								<div class="ligne-form">
										<label for="voie{0}">Voie concernée *</label>
										<input type="text" title="Veuillez indiquer la voie concernée." class="text required" value="" name="voie[{0}]" id="voie[{0}]"/> <em>Autoroute, Route Nationale ou Départementale</em>
								</div>
								<div class="ligne-form">
										<label for="denomination{0}">Dénomination de la voie *</label>
										<input type="text" title="Veuillez indiquer la dénomination de la voie." class="text required" value="" name="denomination[{0}]" id="denomination[{0}]"/> <em>Jonction, sens de circulation</em>
								</div>
								<div class="ligne-form">
										<label for="commune{0}">Commune concernée *</label>
										<input type="text" title="Veuillez indiquer la commune concernée." class="text required" value="" name="commune[{0}]" id="commune[{0}]"/> <em>Nom de la commune</em>
								</div>
								<div class="ligne-form">
										<label for="departement{0}">Département concerné *</label>
										<input type="text" title="Veuillez indiquer le département concernée." class="text required" value="" name="departement[{0}]" id="departement[{0}]"/> <em>Numéro du département</em>
								</div>
								<div class="ligne-form">
										<label for="message{0}">Description du problème recontré *</label>
										<textarea name="message[{0}]" id="message[{0}]" cols="35" rows="6" class="text required"></textarea>
 
								</div>
							</td>
						</tr>
					</textarea>

et l'élément dans lequel le template viendra s'intégrer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<fieldset id="probleme">
		<legend>Signalisation de problèmes rencontrés</legend>
		<p>Vous pouvez saisir votre problème rencontré et le détailler ci-dessous, vous pouvez en ajouter autant que nécessaire.</p>
 
			 <div class="ligne-bouton">
								<table id="ligne-probleme">
								<thead>
								<tr><td align="right" colspan="2"><input type="button" id="add-probleme" class="bouton" value="+ Signaliser un problème"></td></tr>
								</thead>
							<tbody>
							</table>
			</div>
		<p>* champs requis</p> 
        </fieldset>

J'ai un problème qui est que je souhaite dans cet ajout dynamique un champ texte à multiple lignes, donc un textarea, hors, la balise qui appelle le template est déjà un textarea, résultat, mon champ n'est pas exploitable.

J'ai bien essayé d'intégrer un éditeur de texte mais d'autres problèmes se posent.

Comment pourrais-je remplacer la notion de textarea dans l'appel de mon template, jquery.validate.js

J'avais pris cet exemple sur le site suivant.