jquery autoResize rompe la validazione dei form per textarea

Question

Ecco un frammento del jquery:

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

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

- Skipping diverse linee -

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

Ecco un frammento del codice 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>

Si noti che ci possono essere diverse domande in un gruppo con un solo campo di commento. I controlli di convalida del gruppo per tutti i pulsanti di opzione contrassegnato "Buggy" e se ne trova una, poi mette un bordo rosso intorno al campo di commento per richiedere all'utente di commentare la zona buggy (la forma è per i beta tester di un'applicazione desktop ).

Per qualche ragione, quando aggiungo l'autoResize a tutti i miei textareas, il $ (txtarea) .addClass ( 'non valido') la linea a mio convalida non funziona più (ma la seguente riga di $ (intestazione) .addClass ( 'redtext') funziona). Non ricevo errori in Firefox o Firebug. Sono sicuro che il mio codice è un po 'goffo, Sono nuovo di jQuery così un sacco di selettori DOM traversal sono solo "che cosa ha funzionato".

Ecco un link al autoResize plugin jQuery .

Qualche suggerimento?

Sono un novizio di javascript e jquery, quindi non mi dia troppo duro un tempo circa il mio codice amatoriale:)

Answer 1

Non c'è stato molto di ingresso, così ho continuato alla ricerca di un'altra soluzione e credo che ho trovato un uno accettabile. Il Smartarea plug è un più piccolo, più semplice plug-in che fa essenzialmente la stessa cosa, anche se certamente non sembra così bello (le textarea non si animano, e le barre di scorrimento lampeggiano durante la digitazione se non si imposta in modo esplicito la proprietà css overflow 'nascosto'). Tuttavia, per le mie esigenze che fa il trucco e la mia validazione dei form funziona ancora.

Sono sicuro che avrei potuto aggiungere nel codice per animare e gestire la proprietà overflow, ma "se non è rotto ..."

Anche in questo caso, eventuali commenti su questo sono i benvenuti come io sono sempre desiderosi di saperne di più (soprattutto perché non ho effettivamente risolvere il problema, ma piuttosto appena trovato una soluzione).