Pregunta

He aquí un fragmento de la jQuery:

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

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

- Omisión de varias líneas -

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

A continuación se muestra un fragmento del código 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>

Tenga en cuenta que puede haber varias preguntas en un grupo con un único campo de comentarios. Las pruebas de validación del grupo de los botones de opción marcada "Buggy" y si encuentra alguna, entonces se pone un borde rojo alrededor del campo de comentarios para requerir al usuario hacer comentarios sobre el área de buggy (la forma es para los probadores beta de una aplicación de escritorio ).

Por alguna razón, cuando agrego el AUTORESIZE a todos mis áreas de texto, el $ (txtarea) .addClass ( 'no válido') en mi línea de validación ya no funciona (pero la siguiente línea de $ (rúbrica) .addClass ( 'redtext') funciona). Hasta ahora no recibo ningún error en Firefox o Firebug. Estoy seguro de que mi código es un poco torpe, soy nuevo en jQuery así que muchos de los selectores DOM transversales son sólo "lo que funcionó".

Aquí hay un enlace a la AUTORESIZE plugin de jQuery .

¿Alguna sugerencia?

Soy un novato en javascript y jQuery, por lo que no me dan demasiado dura un tiempo acerca de mi código de aficionados:)

¿Fue útil?

Solución

No ha habido mucho de entrada, así que continué buscando otra solución y creo que he encontrado uno aceptable. El smartArea complemento es un plugin pequeño, más simple que básicamente hace lo mismo, aunque ciertamente no se ve tan bonito (las áreas de texto no animada, y barras de desplazamiento se encienden y apagan a medida que escribe a menos que se establezca explícitamente la propiedad CSS desbordamiento de 'oculta'). Sin embargo, para mis necesidades lo hace el truco y mi forma de validación todavía funciona.

Estoy seguro de que podría añadir en el código para animar y manejar la propiedad de desbordamiento, pero "si no está roto ..."

Una vez más, algún comentario sobre este son bienvenidos, siempre estoy con ganas de aprender más (sobre todo porque yo en realidad no soluciona el problema, sino que acaba de encontrar una solución).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top