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> 

Обратите внимание, что может быть несколько вопросов в группе с одним полем комментариев. Проверка проверяет группу на любые радиокнопки с надписью «Багги», и если она находит ее, тогда она помещает красную рамку вокруг поля комментария, чтобы потребовать от пользователя прокомментировать область с ошибкой (форма для бета-тестеров настольного приложения).

По какой-то причине, когда я добавляю autoResize ко всем моим текстовым полям, строка $ (txtarea) .addClass ('invalid') в моей проверке больше не работает (но следующая строка $ (заголовок). addClass ('redtext') работает). Я не получаю никаких ошибок в Firefox или Firebug. Я уверен, что мой код немного неуклюжий, я новичок в jquery, поэтому многие селектора обхода DOM - это просто «что сработало».

Вот ссылка на autoResize jquery plugin.

Любые предложения?

Я новичок в Javascript и JQuery, так что не дает мне слишком трудно время о моем любительском коде :)

Answer 1

Там не было много входных данных, так что я продолжал искать другое решение и Я считаю, что нашел приемлемый. smartArea plugin - это меньший, более простой плагин, который делает практически то же самое, хотя он, по общему признанию, выглядит не так красиво (текстовые области не ожидают, а полосы прокрутки включаются и выключаются при вводе, если вы явно не задали свойство переполнения css к «скрытому»). Однако, для моих нужд это делает трюк, и моя проверка формы все еще работает.

Я уверен, что я мог бы добавить в код, чтобы оживить его и обрабатывать свойство переполнения, но «если он не сломался ...»

Опять же, любые комментарии по этому поводу приветствуются, как я всегда охотно учиться больше (тем более, что я на самом деле не исправить проблему, а скорее нашел обходное решение).