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 :)
Y at-il une raison particulière pour laquelle vous avez .get (0) à la fin de vos sélections? – Mark
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