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添加到我的所有textareas时，我的验证中的$（txtarea）.addClass（'invalid'）行不再起作用（但是以下行$（heading）.addClass （'redtext'）确实有用）。我在Firefox或Firebug中没有收到任何错误。我确定我的代码有点笨拙，我是jquery的新手，因此很多DOM遍历选择器只是“有效”。

以下是autoResize jquery plugin的链接。

有什么建议吗？

我是javascript和jquery的新手，所以不要给我太多时间关于我的业余代码：）

Answer 1

没有太多的意见，所以我继续寻找另一个解决方案，我相信我找到了一个可以接受的解决方案。 smartArea plugin是一个更小，更简单的插件，基本上做同样的事情，虽然它肯定看起来不那么好（textareas没有动画，滚动条会在你键入时闪烁，除非你明确设置css overflow属性为'hidden'）。但是，根据我的需要，它可以解决问题，我的表单验证仍然有效。

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

同样，对此的任何评论都是受欢迎的，因为我总是渴望了解更多信息（特别是因为我实际上没有解决问题，而是找到了解决方法）。

jquery autoResize打破textareas的表单验证

1 个答案: