jquery autoResize 破坏了文本区域的表单验证

Question

这是 jquery 的片段:

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

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

-- 跳过几行--

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

以下是 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>

请注意，一组中可以有多个问题，且只有一个评论字段。验证会检查组中是否有任何标记为“Buggy”的单选按钮，如果发现任何单选按钮，则会在评论字段周围放置红色边框，以要求用户对有问题的区域发表评论(该表单适用于桌面应用程序的 Beta 测试人员) )。

由于某种原因，当我将 autoResize 添加到所有文本区域时，验证中的 $(txtarea).addClass('invalid') 行不再起作用(但以下行 $(heading).addClass ('redtext')确实有效)。我在 Firefox 或 Firebug 中没有收到任何错误。我确信我的代码有点笨拙，我是 jquery 新手，所以很多 DOM 遍历选择器只是“有效的”。

这里是 autoResize jquery plugin 的链接.

有什么建议吗？

我是 javascript 和 jquery 的新手，所以不要对我的业余代码太挑剔:)

Answer 1

没有太多的意见，所以我继续寻找另一种解决方案，我相信我已经找到了一个可以接受的解决方案。 smartArea plugin是一个更小、更简单的插件，本质上做同样的事情，尽管它确实看起来不太好(文本区域没有动画，并且滚动条在您键入时闪烁，除非您明确将 css 溢出属性设置为 '隐')。但是，对于我的需要，它确实有效，并且我的表单验证仍然有效。

我确信我可以添加代码来为其设置动画并处理溢出属性，但是“如果它没有损坏......”

再次，欢迎对此提出任何评论，因为我总是渴望了解更多信息(特别是因为我实际上并没有解决问题，而只是找到了解决方法)。