Le plugin jQuery Validation ne valide pas les éléments de formulaire créés dynamiquement
J'ai un formulaire où vous pouvez ajouter dynamiquement de nouvelles lignes avec des éléments d'entrée.
Avant de soumettre mon formulaire il obtient validée en utilisant le plugin à partir d'ici http://jqueryvalidation.org/.
Actuellement, le code pour ajouter une nouvelle ligne avec des éléments d'entrée ressemble à ceci:
function addTimeRow(table, stime)
{
//var rowIdx = $('#seminarTimes tr').length - 1;
var $id = $('<input type="hidden" name="stid[]">');
var $dateField = $('<input type="text" name="date[]" class="input-mini">');
var $date = $('<div class="input-append date">')
.append($dateField)
.append('<span class="add-on"><i class="icon-calendar">');
var $from = $('<input type="text" name="from[]" class="input-mini"> <span>(hh:mm)</span>');
var $to = $('<input type="text" name="to[]" class="input-mini"> <span>(hh:mm)</span>');
if (typeof(stime) !== 'undefined')
{
$id.attr('value', stime.id);
$dateField.attr('value', stime.date);
$from.attr('value', stime.from);
$to.attr('value', stime.to);
}
else
$id.attr('value', -1);
//Attach new input row.
table
.append($('<tr>')
.append($id)
.append($('<td>')
.append($date))
.append($('<td>')
.append($from))
.append($('<td>')
.append($to))
.append($('<td class="vert">')
.append($('<button class="btn btn-mini btnDelTime"><i class="icon-trash">'))));
//Attach rules.
$dateField.rules('add', { required: true });
$from.rules('add', { required: true });
$to.rules('add', { required: true });
//Create pickers.
$date.datepicker({
language: 'de',
autoclose: true,
todayBtn: true,
todayHighlight: true,
}).on('changeDate', function(e) {
editSeminarFormValidator.element($dateField);
$date.datepicker('hide');
});
}
Dans mon document prêt événement j'ai initialiser le plugin JQuery validation de la sorte:
var validator = $('#editSeminarForm').validate({
debug: true,
errorLabelContainer: '#error-label',
wrapper: 'li',
messages: {
price: 'Bitte geben Sie einen Preis ein!'
}
});
Maintenant mon problème, c'est qu'aucun des nouveaux champs de saisie obtient validée.
Je sais que je suis en utilisant la saisie des tableaux pour faciliter la manipulation le formulaire sur le côté serveur. Sont ces tableaux le problème, pourquoi mon champs de saisie ne pas être validé?
EDIT - Ma solution actuelle:
var rowIdx = 0;
function addTimeRow(table, stime)
{
var $id = $($.validator.format('<input type="hidden" id="stid{0}" name="stid[{0}]">', rowIdx));
var $dateField = $($.validator.format('<input type="text" id="date{0}" name="date[{0}]" class="input-mini">', rowIdx));
var $date = $('<div class="input-append date">')
.append($dateField)
.append('<span class="add-on"><i class="icon-calendar">');
var $from = $($.validator.format('<input type="text" id="from{0}" name="from[{0}]" class="input-mini"> <span>(hh:mm)</span>', rowIdx));
var $to = $($.validator.format('<input type="text" id="to{0}" name="to[{0}]" class="input-mini"> <span>(hh:mm)</span>', rowIdx));
if (typeof(stime) !== 'undefined')
{
$id.attr('value', stime.id);
$dateField.attr('value', stime.date);
$from.attr('value', stime.from);
$to.attr('value', stime.to);
}
else
$id.attr('value', -1);
//Attach new input row.
table
.append($('<tr>')
.append($id)
.append($('<td>')
.append($date))
.append($('<td>')
.append($from))
.append($('<td>')
.append($to))
.append($('<td class="vert">')
.append($('<button class="btn btn-mini btnDelTime"><i class="icon-trash">'))));
//Attach rules.
$dateField.rules('add', { required: true });
$from.rules('add', { required: true });
$to.rules('add', { required: true });
//Create pickers.
$date.datepicker({
language: 'de',
autoclose: true,
todayBtn: true,
todayHighlight: true,
}).on('changeDate', function(e) {
editSeminarFormValidator.element($dateField);
$date.datepicker('hide');
});
rowIdx++;
}
Fonctionne comme un charme!
source d'informationauteur VitaminCpp
Vous devez vous connecter pour publier un commentaire.
Il semble n'y avoir sérieusement mal avec la logique que vous utilisez pour ajouter des règles pour les nouveaux éléments. Bien quevous aurez besoin d'attacher la
.rules()
méthode jQuery objet à l'aide de jQuery sélecteur depas de l'élément HTML.quelque chose comme...
ou...
Mais le cœur du problème est ici...
Avis de la
name
attribut? Ça va être la même pour chaque nouvelle ligne.Le problème est que le jQuery Valider le plugin ne fonctionnera pas à moins que chaque
input
élément contient un uniquename
. Il suffit de modifier votre code pour s'assurer qu'un nouveauname
est créé pour chaque nouvel élément.Il pourrait être un doublon de:
Longue histoire courte, vous devez appeler
http://validation.bassistance.de/rules
ou, mis à jour,
http://jqueryvalidation.org/rules
Comme une note de côté: puisque vous injecter beaucoup de
HTML
deJS
il pourrait être une bonne idée d'essayer un moteur de template.