JQuery Autoresize Breaks Form Valification for textareas

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>

لاحظ أنه يمكن أن يكون هناك عدة أسئلة في مجموعة مع حقل تعليق واحد فقط. يتحقق التحقق من الصحة من المجموعة لأي أزرار راديو تحمل علامة "عربات التي تجرها الدواب" وإذا وجدت أيًا منها ، فإنها تضع حدودًا حمراء حول حقل التعليقات لتتطلب من المستخدم التعليق على منطقة عربات التي تجرها الدواب (النموذج مخصص لمختبري بيتا لسطح المكتب ).

لسبب ما ، عندما أقوم بإضافة حجم التلقائي إلى كل textareas ، فإن خط $ (txtarea) .addClass ('invalid') في التحقق الخاص بي لم يعد يعمل (ولكن السطر التالي $ (عنوان) .addClass ('redtext ') تعمل). أنا لا أحصل على أي أخطاء في Firefox أو Firebug. أنا متأكد من أن الكود الخاص بي أخرق بعض الشيء ، فأنا جديد على jQuery ، لذا فإن الكثير من محددات DOM Traversal هم مجرد "ما نجح".

إليك رابط لـ jquery jquery jquery.

أي اقتراحات؟

أنا مبتدئ في JavaScript و JQuery ، لذلك لا تعطيني وقتًا صعبًا جدًا عن رمز الهواة :)

Answer 1

لم يكن هناك الكثير من المدخلات ، لذلك واصلت البحث عن حل آخر وأعتقد أنني وجدت حل مقبول. ال Plugin Smartarea هو مكون إضافي أصغر وأبسط يفعل نفس الشيء بشكل أساسي ، على الرغم من أنه من المسلم به أنه لا يبدو لطيفًا (لا يتم تحريك Textareas ، وتوضيح أشرطة التمرير وإيقاف تشغيلها إلا إذا قمت بتعيين خاصية تدفق CSS بشكل صريح إلى " مختفي'). ومع ذلك ، لاحتياجاتي ، فإنه يفعل الخدعة وما زال التحقق من صحة النموذج يعمل.

أنا متأكد من أنه يمكنني إضافة رمز لتحريكه والتعامل مع خاصية الفائض ، ولكن "إذا لم يتم كسرها ..."

مرة أخرى ، أي تعليقات على ذلك مرحب بها لأنني دائمًا حريص على معرفة المزيد (خاصةً لأنني لم أصلح المشكلة فعليًا ، بل وجدت حلًا بديلًا).