jquery autoResize 打破了 textareas 的表单验证答案

【问题标题】：jquery autoResize breaks form validation for textareasjquery autoResize 打破了 textareas 的表单验证
【发布时间】：2011-03-08 12:17:29
【问题描述】：

这是 jquery 的 sn-p：

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

这是一个sn-p的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 的新手，所以不要对我的业余代码太苦恼:)

【问题讨论】：

在选择的末尾有 .get(0) 是否有特殊原因？
哈，说实话，我不知道。就像我的帖子提到的那样，在尝试了几种不同的方法来选择这些元素之后，这对我有用。我首先尝试将所有这些行链接到一个行中，该行将选择具有“itemComment”类的父母的父母的孩子，但这不起作用。然后我试着把它分成不同的行，每一行都分配给一个变量。在我使用 .get(0) 之前，这也不起作用。任何清理我的代码的建议都将不胜感激，无论它是否回答了我最初的问题！

标签： jquery plugins textarea height autoresize

【解决方案1】：

没有太多意见，所以我继续寻找另一种解决方案，我相信我找到了一个可以接受的解决方案。 smartArea plugin 是一个更小、更简单的插件，它基本上做同样的事情，尽管它看起来不太好（文本区域不动画，滚动条在你输入时闪烁，除非你明确设置 css溢出属性到“隐藏”）。但是，根据我的需要，它可以解决问题，并且我的表单验证仍然有效。

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

再次，欢迎任何有关这方面的 cmets，因为我总是渴望了解更多信息（特别是因为我实际上并没有解决问题，而只是找到了解决方法）。

【讨论】：