2010-06-25 13 views
3

Voici un extrait de la jquery:jquery AutoResize casse la validation du formulaire pour textareas

$(document).ready(function() { 
$('textarea').autoResize(); 

$('#submitSurvey').click(function() { 

- Skipping plusieurs lignes -

$("input[id$='Buggy']:radio:checked").each(function() {// If any radio buttons are marked "Buggy" and no comment is left, require comment 
    var parent = $(this).parent().get(0);// parent element of the radio button 
    var nextCommentDiv = $(parent).nextAll('.comments').get(0); 
    var txtarea = $(nextCommentDiv).children('.itemComment').get(0);// comment for the radio button marked "Buggy" 
    var surroundingDiv = $(parent).parent().get(0); 
    var heading = $(surroundingDiv).prev();// section title 
    if(txtarea.value == '' || txtarea.value == 'Type comments here') { 
    $(txtarea).addClass('invalid'); 
    $(heading).addClass('redtext'); 
    valid = false; 
    } 
    }); 
}); 
}); 

Voici un extrait du code html:

<div class="subQ">Question 1</div> 
<div class="ratings"> 
<input type="radio" name="item1" id="item1Works" value="Works" /><label for="item1Works"> Works </label> 
<input type="radio" name="item1" id="item1Buggy" value="Buggy" /><label for="item1Buggy"> Buggy </label> 
<input type="radio" name="item1" id="item1na" value="Not Tested" /><label for="item1na"> Didn't Test</label> 
</div><br /> 
<div class="subQ">Question 2</div> 
<div class="ratings"> 
<input type="radio" name="item2" id="item2Works" value="Works" /><label for="item2Works"> Works </label> 
<input type="radio" name="item2" id="item2Buggy" value="Buggy" /><label for="item2Buggy"> Buggy </label> 
<input type="radio" name="item2" id="item2na" value="Not Tested" /><label for="item2na"> Didn't Test</label> 
</div><br /> 
<div class="subQ">Question 3</div> 
<div class="ratings"> 
<input type="radio" name="item3" id="item3Works" value="Works" /><label for="item3Works"> Works </label> 
<input type="radio" name="item3" id="item3Buggy" value="Buggy" /><label for="item3Buggy"> Buggy </label> 
<input type="radio" name="item3" id="item3na" value="Not Tested" /><label for="item3na"> Didn't Test</label> 
</div><br /> 
<div class="comments"> 
<textarea class="itemComment" name="itemsComment" id="itemsComment" rows="1">Type comments here</textarea> 
</div> 

Notez qu'il peut y avoir plusieurs questions dans un groupe avec un seul champ de commentaire. La validation vérifie le groupe pour les boutons radio marqués "Buggy" et s'il en trouve, il place une bordure rouge autour du champ de commentaire pour obliger l'utilisateur à commenter la zone boguée (le formulaire est pour les bêta-testeurs d'une application de bureau). Pour une raison quelconque, lorsque j'ajoute le paramètre autoResize à toutes mes zones de texte, la ligne $ (txtarea) .addClass ('invalide') dans ma validation ne fonctionne plus (mais la ligne suivante $ (en-tête). addClass ('redtext') fonctionne). Je ne reçois aucune erreur dans Firefox ou Firebug. Je suis sûr que mon code est un peu maladroit, je suis nouveau sur jquery donc beaucoup de sélecteurs DOM traversal sont juste "ce qui a marché".

Voici un lien vers le autoResize jquery plugin.

Des suggestions?

Je suis un débutant et javascript jquery, alors ne me donne pas trop de temps à mon code amateur :)

+0

Y at-il une raison particulière pour laquelle vous avez .get (0) à la fin de vos sélections? – Mark

+0

Ha, pour être honnête, je ne sais pas. Comme mes post-mentions, c'est juste ce qui a fonctionné pour moi après avoir essayé plusieurs façons de sélectionner ces éléments. J'ai d'abord essayé d'enchaîner toutes ces lignes en une seule ligne qui sélectionnerait l'enfant du parent du parent avec la classe de 'itemComment', mais cela n'a pas fonctionné. J'ai alors essayé de le diviser en lignes séparées, où chacun a été assigné à une variable. Cela ne fonctionnait pas non plus jusqu'à ce que j'utilise le .get (0). Toutes les suggestions pour nettoyer mon code seraient très appréciées, peu importe si elle répond à ma question initiale! – Josh

Répondre

1

Il n'a pas été entrée beaucoup, donc je continuais à chercher une autre solution et Je crois que j'ai trouvé un acceptable. Le smartArea plugin est un plugin plus petit et plus simple qui fait essentiellement la même chose, bien qu'il ne soit pas aussi beau (les zones de texte ne s'animent pas et les barres de défilement clignotent lorsque vous tapez sauf si vous définissez explicitement la propriété css overflow "caché"). Cependant, pour mes besoins, cela fait l'affaire et ma validation de formulaire fonctionne toujours.

Je suis sûr que je pourrais ajouter dans le code pour animer et gérer la propriété de débordement, mais « si elle est pas cassé ... » Encore une fois

, des commentaires sur ce sont les bienvenus comme je suis toujours désireux d'en savoir plus (surtout que je n'ai pas vraiment corrigé le problème, mais plutôt trouvé une solution de contournement).