I've worked on this for quite some time now, and am stumped. I'm hoping someone has some direction for me. First the code:
The jQuery:
$("#paperwork").bind("onFail", function(e, errors) {
if (e.originalEvent.type == 'submit') {
$.each(errors, function() {
var input = this.input;
input.parent().css({color: 'red'}).change(function() {
input.parent().css({color: '#444'});
});
});
}
});
And a sampling of the HTML:
<input id="group_1" required="required" type="radio" name="attending" value="Yes" />Yes
<input id="group_1" type="radio" name="attending" value="No" />No
<input id="group_1" type="radio" name="attending" value="Not Provided" />Not Provided
<input id="group_1" class="single_text_input" type="text" name="primary_referral" />
<input id="group_1" class="single_text_input" type="text" name="secondary_referral" />
<span class="group_1">Referrals</span>
There are several sections that look much like the above. Each with a corresponding <span> (e.g. "2", "3", etc...) What I'm trying to accomplish is this:
When the validator runs, the .parent() element of each input turns red. That is working. When the user makes a change to the input, the .parent() element returns to its original color. That is also working.
In addition to this, I would like to turn each input section's corresponding <span> red (text or background). Then, when all the inputs within that section are changed, the corresponding <span> is returned to its original appearance. One issue (at least for me) is that the div containing the inputs and the corresponding <span> do not seem to be related to each other, whether by .parent(), .child(), or .closest.
