JQuery AutoResize разрывы проверки формы для текстовых областей - PullRequest
Новая
       33

JQuery AutoResize разрывы проверки формы для текстовых областей

3 голосов
/ 26 июня 2010

Вот фрагмент 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», и, если она обнаруживает их, ставит красную рамку вокруг поля комментария, чтобы потребовать от пользователя комментировать область с ошибками (форма предназначена для бета-тестеров настольного приложения.).

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

Вот ссылка на плагин autoResize jquery .

Есть какие-нибудь предложения?

Я новичок в javascript и jquery, поэтому не беспокойтесь о моем любительском коде:)

1 Ответ

1 голос
/ 29 июня 2010

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

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

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

...