2010-06-21 4 views
4

Dans une forme une zone de texte est créée dynamiquement en cliquant sur le bouton Ajouter de telle sorte que la zone de texte est créée dans une nouvelle ligne.Maintenant mon problème est la validation des zones de texte qui ont été créées dynamiquement qu'il affiche un message si l'une des zones de texte est laissée vide lorsque le formulaire est envoyé en cliquant sur le bouton Envoyer. Veuillez m'aider.validation javascript sur les zones de texte créées dynamiquement

EDIT

<html> 
    <head> 

    <SCRIPT language="javascript"> 
    function addRow(tableID) { 

    var table = document.getElementById(tableID); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    element1.type = "text"; 
    cell1.appendChild(element1); 
} 

    </SCRIPT> 
    </head> 


    <body> 


    <form onSubmit="return validateFormOnSubmit(this)"> 
    <INPUT type="button" value="Add More Symptom " onClick="addRow('dataTable')" /> 


    <TABLE id="dataTable" > 
     <TR> 

     <TD > 
      <INPUT type="text" name="symp[]" /> 
     </TD> 
     </TR> 
    </TABLE> 
    <input type="submit" value="Submit" name="ADD_SUBMIT"> 
    </form> 


    </body>  
    </html> 

Ci-dessus, le script d'ajouter de nouvelles zones de texte dans une nouvelle ligne. Maintenant, je demande que lorsque vous cliquez sur le bouton Soumettre, chaque zone de texte doit être validée, qu'elle soit vide ou non côté client. Les valeurs entrées dans la zone de texte ne doivent pas disparaître et le nombre de zones de texte vides doit être identique.

+0

1. Validation des zones de texte côté client ou côté serveur? 2. montrer un peu de code peut-être pourrait nous répondre. 3. Si la validation côté client des boîtes ne change pas beaucoup, elles sont créées dynamiquement ou non. –

+0

Ici, les zones de texte, créées dynamiquement, doivent être validées côté client. – Satish

Répondre

3

Dans l'événement de soumission du formulaire, il vous suffit de collecter toutes les zones de saisie que vous trouvez dans le formulaire et de les transmettre à une fonction de validation.

Mettez ce code dans la section <head> de votre page

//This function here is only a cross-browser events stopper 
stopEvent = function(ffevent) 
{ 
    var current_window = window; 

    if(current_window.event) //window.event is IE, ffevent is FF 
    { 
     //IE 
     current_window.event.cancelBubble = true; //this stops event propagation 
     current_window.event.returnValue = false; //this prevents default (usually is what we want) 
    } 
    else 
    { 
     //Firefox 
     ffevent.stopPropagation(); 
     ffevent.preventDefault(); 
    }; 
} 

function validateAllInputBoxes(ffevent) 
{ 
    var inputs = document.getElementsByTagName('input'); 
    for(var i = 0; i < inputs.length; ++i) 
     if(inputs[i].type === 'text') 
     //@Satish, maybe below you wrote by mistake if(inputs[i].value = '') thus all input elements values get cleared out. 
     if(inputs[i].value === '') 
     { 
      alert("form could not be sent one input text field is empty"); 
      stopEvent(ffevent); 
     } 
} 

et au lieu de balise <form> le code suivant:

onsubmit="validateAllInputBoxes(event);" 
+0

Le code ci-dessus fonctionne, mais lorsque la case d'alerte est entrée, les anciennes valeurs dans les zones de texte ne doivent pas disparaître et le nombre de zones de texte créées doit être identique. dans le code édité. – Satish

+0

1er) REMPLACER

Ce n'est même pas un navigateur croisé avec (exactement comment je l'ai écrit) et réessayez! 2ème) Il n'y a aucune raison pour que l'ancienne valeur soit effacée avec votre code/mine. Nous ne touchons pas le texte de la valeur à moins de lire le commentaire que j'ai ajouté dans le code. –

+0

Merci avec peu de modification dans votre code j'ai obtenu le résultat dont j'ai besoin. – Satish

Questions connexes