Comment valider les entrées clonées en utilisant Javascript?

J'ai un problème en utilisant l'élément d'identité. Fondamentalement, je veux créer un formulaire html simple où l'utilisateur peut entrer un numéro de téléphone - lié à un certain code - qui doit être validé et envoyé à un certain dossier.Comment valider les entrées clonées en utilisant Javascript?

Cependant, je souhaite donner aux utilisateurs la possibilité d'entrer autant de numéros de téléphone qu'ils le souhaitent. Il m'a donc semblé logique d'utiliser la méthode clone. Cependant, l'aspect négatif de l'utilisation de cette méthode est que l'identité est toujours la même. En d'autres termes, si un numéro de téléphone a une entrée incorrecte, je ne peux pas rediriger l'utilisateur vers le texte d'entrée qui ne correspond pas aux règles de validation.

J'ai déjà essayé plusieurs choses, mais je ne sais tout simplement pas comment incrémenter l'élément d'identité "Tel" de 1, ou pour valider chaque texte d'entrée.

Ci-dessous vous pouvez trouver mon code. J'ai utilisé la méthode getElementsByName car Firefox affecte automatiquement un nombre incrémenté à chaque nom d'entrée. Cependant, si je pouvais trouver un moyen d'incrémenter l'identité de 1 pour chaque texte d'entrée utilisé, je préférerais cette façon de travailler. Je suis ouvert à toutes les suggestions, mais je préfère utiliser le javascript simple car je ne connais pas JQuery.

Thx à l'avance.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>SMS</title> 
</head> 
<body> 

<script type="text/javascript"> 

var counter = 0; 

function moreFields() { 
    counter++; 
    var newFields = document.getElementById('readroot').cloneNode(true); 
    newFields.id = ''; 
    newFields.style.display = 'block'; 
    var newField = newFields.childNodes 
    for (var i=0;i<newField.length;i++) { 
     var theName = newField[i].name; 
     if (theName) 
      newField[i].name = theName + counter; 
    } 
    var insertHere = document.getElementById('writeroot'); 
    insertHere.parentNode.insertBefore(newFields,insertHere); 
} 

window.onload = moreFields; 


function checkPhone() { 

var x=document.getElementsByName("Tel").length; 


var TotTel = new Array(); 

for(i = 0; i < x; i++) 
{ 
TotTel[i] += document.getElementsByName('PhoneNumber')[i].value; 


if(TotTel[i] == "" || TotTel[i] == null) 
{ 
alert("Please enter a phone number"); 
return false; 
} 

else if(isNaN(TotTel[i])) 
{ 
    alert("You can only enter numbers"); 
    return false; 
} 
} 
alert("Validation ok"); 
return true; 
} 

</script> 


<div id="readroot" style="display:none"> 

    <input type="button" value="Remove field" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" /><br /><br /> 

    Phone number: <input name="PhoneNumber" class="Tel" id="Tel" /> 

    SMSCode: <select name="SMSCodes"> 
     <option>Codes</option> 
     <option value="B2BNL"> B2BNL </option> 
     <option value="B2BFR"> B2BFR </option> 
     <option value="B2BEN"> B2BEN </option> 
     <option value="B2CNL"> B2CNL </option> 
     <option value="B2CFR"> B2CFR </option> 
     <option value="B2CEN"> B2CEN </option> 
     <option value="AMNL"> AMNL </option> 
     <option value="AMFR"> AMFR </option> 
     <option value="PMNL"> PMNL </option> 
     <option value="PMFR"> PMFR </option> 
     <option value="PMPNL"> PMPNL </option> 
     <option value="PMPFR"> PMPFR </option> 
     <option value="BWAYAM"> BWAYAM </option> 
     <option value="BWAYPM"> BWAYPM </option> 
     <option value="BWAYPMP"> BWAYPMP </option> 
     <option value="BWAY18"> BWAY18 </option> 
     <option value="SPEOSNL1114"> SPEOSNL1114 </option> 
     <option value="SPEOSFR1114"> SPEOSFR1114 </option> 
     <option value="SPEOSNL1417"> SPEOSNL1417 </option> 
     <option value="SPEOSFR1417"> SPEOSFR1417 </option> 
     <option value="SPEOSNL1721"> SPEOSNL1721 </option> 
     <option value="SPEOSFR1721"> SPEOSFR1721 </option> 
    </select><br /><br /> 
</div> 

<form name="SMSForm" action="" onsubmit="checkPhone()" method="post"> 

    <span id="writeroot"></span> 

    <input type="button" onclick="moreFields()" value="More Phone numbers" /> 
    <input type="submit" value="Send" /> 

</form> 

</body> 
</html>

Source

2013-06-27 user2524776

Il y a plusieurs bogues dans votre code, cela devrait fonctionner si vous le corrigez. L'expression ci-dessus évalue à 0 car "Tel" est l'identifiant de textfield.

for(i = 0; i < x; i++){

S'il vous plaît noter que Firefox attribuer 1 à la première textfield, non 0.

TotTel[i] += document.getElementsByName('PhoneNumber')[i].value;

La ligne ci-dessus des bogues de code car il ne retourne nœuds de exactement le nom « PhoneNumber », et non " PhoneNumberSomething ". Vous pouvez essayer quelque chose comme

TotTel[i] += document.getElementsByName('PhoneNumber'+i)[0].value;

Comme par exemple PhoneNumber1 est un nom unique, donc la méthode renvoie un tableau d'éléments. Et s'il vous plaît soyez conscient que l'utilisateur peut ajouter quelques autres champs de numéro de téléphone, puis supprimez le premier. La séquence numérique résultante sera 1, 3, 4 ... mais PhoneNumber2 n'existe pas.

Je pensais à deux méthodes pour gérer ce problème. Le premier consiste à construire un tableau ou similaire pour stocker le nœud lorsque vous le clonez et le retirer du tableau lorsque l'utilisateur le supprime, de sorte que vous pouvez trouver tous les nœuds clonés à partir de ce tableau E.g.

arr[counter] = document.getElementById('readroot').cloneNode(true);

La deuxième méthode utilise jquery http://api.jquery.com/attribute-contains-selector/

$("form input[name*=PhoneNumber]")

Le sélecteur ci-dessus permet de sélectionner tous textfield dont le nom contient PhoneNumber sous la forme.

Source

2013-06-27 13:16:26 kftse

Comment valider les entrées clonées en utilisant Javascript?

Répondre

Questions connexes