Je rencontre des problèmes lors de la validation d'éléments clonés. Toutes mes excuses pour le montant de codage affiché, mais je pensais que je pourrais aussi bien le mettre en place dès le départ.Validation de clone jQuery
Ceci est un exemple de la div d'origine:
<div id="addDriver1" class="clonedInput">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="<?= $editDriver; ?>">
<tr>
<td height="25" align="left" valign="top"><label for="driverReq" >Do you want to make this change or are
you looking for a quote only?</label></td>
<td height="25" align="left" valign="top" colspan="2"><select name="driverReq" id="driverReq">
<option selected="selected" value="">Please select</option>
<option value="Make Change" <? if ($_SESSION['driverReq']=="Make Change") { echo "selected";} ?> >Make Change</option>
<option value="Quote only" <? if ($_SESSION['driverReq']=="Quote only") { echo "selected";} ?>>Quote only</option>
</select></td>
</tr>
<tr>
<td height="5" colspan="3" ></td>
</tr>
<tr>
<td height="25" align="left" valign="top"><label for="driverDate" ;?>>What date would you like this change
to be effective from? </label></td>
<td height="25" align="left" valign="top"><input name="driverDate" type="text" id="driverDate" style="width: 75px;" value="<?=$_SESSION['driverDate']; ?>" /></td>
<td height="25" align="left" valign="top">(DD/MM/YYYY) </td>
</tr>
<tr>
<td height="5" colspan="3" ></td>
</tr>
</table></div>
Voici le script de clonage:
$('#btnAddDriver').live('click',function() {
var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('#addDriver1').clone(true).attr('id', 'addDriver' + newNum);
newElem.prepend("<div class='subhead1'>Add a driver "+newNum+"</div>");
//newElem.find()
// insert the new element after the last "duplicatable" input field
$('#addDriver' + num).after(newElem);
//add the new ID to the inputs
newElem.find("*[id]").each(function() {
$(this).attr("id", $(this).attr("id") + newNum);
$(this).attr("name", $(this).attr("name") + newNum);
$(this).attr("value", $(this).attr("<?= $_SESSION['"+$(this).attr("name") + newNum+"']; ?>"));
});
newElem.find("label").each(function() {
$(this).attr("for", $(this).attr("for")+ newNum);
});
Cette sortie les éléments clonés avec de nouveaux id et le nom par exemple , « >, Etc.
C'est le genre de validation que je suis en train:
validateDriverReq2 = function(){
if(driverReq2.val()==""){
$(this).addClass("error");
driverReq2Info.html("Please confirm what you would like us to do with your request.<br>");
$("#driverReq2Info").addClass("errorTop");
//labelAddPC.addClass("labelError");
$("label[for='driverReq2']").addClass("labelError");
checkErrors();
topErrorDriver();
return false;
}
else{
driverReq2.removeClass("error");
driverReq2Info.html("");
driverReq2Info.removeClass("errorTop");
$("label[for='driverReq2']").removeClass("labelError");
checkErrors();
topErrorDriver();
return true;
}
}
driverReq2.blur(validateDriverReq2);
driverReq2.change(validateDriverReq2);
validateDriverReq = function(){
if(driverReq.val()==""){
$(this).addClass("error");
driverReqInfo.html("Please confirm what you would like us to do with your request.<br>");
$("#driverReqInfo").addClass("errorTop");
//labelAddPC.addClass("labelError");
$("label[for='driverReq']").addClass("labelError");
checkErrors();
topErrorDriver();
return false;
}
else{
driverReq.removeClass("error");
driverReqInfo.html("");
driverReqInfo.removeClass("errorTop");
$("label[for='driverReq']").removeClass("labelError");
checkErrors();
topErrorDriver();
return true;
}
}
// }
driverReq.blur(validateDriverReq);
driverReq.change(validateDriverReq);
utiliser ce code dans d'autres domaines de la forme et il fonctionne très bien cependant, cette validation devient totalement foiré. Le déplacement dans le pilote cloneReq2 entraîne l'activation et l'affichage d'une erreur par l'instruction driverReq d'origine, bien qu'elle saisisse une erreur correctement dans le champ driverReq2 lui-même. supprimer lui-même le changement ou le flou
J'ai essayé, sans succès, de lier les variables afin qu'elles pointent vers Le nom du formulaire lui-même et sa div parente (par ex. # addDriver2).
J'espère que quelqu'un ici peut aider et conseiller ce que je fais mal avant d'aller complètement gaga
Merci