jquery autoResize breaks form validation for textareas

Question

Here's a snippet of the jquery:

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

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

-- Skipping several lines --

  $("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;
   } 
  });
 });
});

Here is a snippet of the html code:

<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>

Note that there can be several questions in a group with only one comment field. The validation checks the group for any radio buttons marked "Buggy" and if it finds any, then it puts a red border around the comment field to require the user to comment on the buggy area (the form is for beta testers of a desktop application).

For some reason, when I add the autoResize to all of my textareas, the $(txtarea).addClass('invalid') line in my validation doesn't work anymore (but the following line $(heading).addClass('redtext') does work). I'm not getting any errors in Firefox or Firebug. I'm sure my code is a bit clumsy, I'm new to jquery so a lot of the DOM traversal selectors are just "what worked".

Here's a link to the autoResize jquery plugin.

Any suggestions?

I'm a newbie to javascript and jquery, so don't give me too hard a time about my amateur code :)

Answer 1

There hasn't been much input, so I continued looking for another solution and I believe I've found an acceptable one. The smartArea plugin is a smaller, simpler plugin that does essentially the same thing, though it admittedly doesn't look as nice (the textareas don't animate, and scroll bars flash on and off as you type unless you explicitly set the css overflow property to 'hidden'). However, for my needs it does the trick and my form validation still works.

I'm sure I could add in code to animate it and handle the overflow property, but "if it ain't broke..."

Again, any comments on this are welcome as I'm always eager to learn more (especially since I didn't actually FIX the problem, but rather just found a workaround).