Here is a jquery snippet:
$(document).ready(function() {
$('textarea').autoResize();
$('#submitSurvey').click(function() {
- Skip multiple lines -
$("input[id$='Buggy']:radio:checked").each(function() {
var parent = $(this).parent().get(0);
var nextCommentDiv = $(parent).nextAll('.comments').get(0);
var txtarea = $(nextCommentDiv).children('.itemComment').get(0);
var surroundingDiv = $(parent).parent().get(0);
var heading = $(surroundingDiv).prev();
if(txtarea.value == '' || txtarea.value == 'Type comments here') {
$(txtarea).addClass('invalid');
$(heading).addClass('redtext');
valid = false;
}
});
});
});
Here is the html code snippet:
<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>
Please note that a group may have several questions with one comment field. The check checks the group for any radio buttons labeled "Buggy", and if it finds it, then it places a red frame around the comment field to require the user to comment on the area with the error (form for beta testers of a desktop application).
- , autoResize , $(txtarea).addClass('invalid') ( $().addClass( "redtext" ) ). Firefox Firebug. , , jquery, DOM - " ".
autoResize jquery.
?
javascript jquery, :)