0

I want to validate whether all the questions are answered or not and display a message "Answer is Required". Each of the question has YES and NO Radio buttons.

The following piece of code places "Answer is required" for every question even though one of the Radio button is checked. But I want the message to be shown when none of the Radio button or selected for that question.

  $('input:radio').not(':checked').closest('td').next().html("Answer is Required");

HTML :

<table border="0">
    <tr>
        <td class="TextBold">1.</td>
        <td class="TextBold" align="left" valign="middle">Content of Question 1 :</td>
        <td class="TextBold" align="left" valign="middle">
            <table id="ctl00_DefaultContent_ctl01" border="0">
                <tr>
                    <td>
                        <input id="ctl00_DefaultContent_ctl01_0" type="radio" name="ctl00$DefaultContent$ctl01" value="Yes" />
                        <label for="ctl00_DefaultContent_ctl01_0">Yes</label>
                    </td>
                    <td>
                        <input id="ctl00_DefaultContent_ctl01_1" type="radio" name="ctl00$DefaultContent$ctl01" value="No" />
                        <label for="ctl00_DefaultContent_ctl01_1">No</label>
                    </td>
                </tr>
            </table>
        </td>
        <td class="TextBold" align="left" valign="middle"></td>
    </tr>
</table>

Please advice.

Thanks in advance

BB

5
  • 1
    Posting your HTML structure and creating a jsfiddle.net demo would be very helpful. Jan 30, 2012 at 22:14
  • Oh God, seriously? I had a working solution in jsFiddle, but it definitely won't work for crazy nested tables. Jan 30, 2012 at 22:55
  • Jordan could you pls share the solution.
    – BumbleBee
    Jan 30, 2012 at 22:58
  • This whole thing is being generated dynamically.
    – BumbleBee
    Jan 30, 2012 at 22:59
  • @BumbleBee Okay, see below. You poor thing, though, I don't envy you one bit. Jan 30, 2012 at 23:18

3 Answers 3

2

Right, after some allowances for the nested table structure, the crucial bit is:

$('table td:has(table)')
    .has('input:radio:not(:checked)') // Contains unchecked radios
    .not(':has(input:radio:checked)') // Doesn't contain checked radios
    .next()
    .html("Answer is required");
;

Demo: http://jsfiddle.net/euN2Z/2/

(I've added a line in the demo to clear old validation messages; this might be useful to you, depending on your requirements.)

You have my utmost sympathies for having to work with HTML like this. I strongly recommend that if you possibly can, you should arrange to have it simplified; the nested table is especially gory when it comes to working with the DOM, and the slightest change is likely to make the whole thing blow up spectacularly.

I'm guessing this is part of a larger page with many more tables, so I strongly recommend you identify the table containing your questions using e.g. an id attribute and update the selectors accordingly.

2
  • Joradan Thank you. what is the purpose of $('table tr td.TextBold:last-child').html('');
    – BumbleBee
    Jan 31, 2012 at 0:24
  • @BumbleBee See the note in brackets, just after the link; it's used to clear the validation messages before validating again. You may or may not need this, depending on how you're using this code. Jan 31, 2012 at 0:32
1

Without knowing the structure of your HTML, it is difficult to give a definite answer, but I guess something like this should work:

$('td').not(function() {
    var $radios = $(this).find('input[type="radio"]');
    return $radios.length === 0 || $radios.filter(':checked').length > 0;
}).next().html("Answer is Required");

Update: Nested tables make it a bit more tricky. I suggest you either get rid of them (using tables for styling is a no-go anyway), or add a class to those table cells which contain the options to choose from (the whole nested table) so that you can select them more easily.

3
  • Thank you. All the controls are being generated dynamically I don't have much control over them. The code you posted didn't solve my problem.
    – BumbleBee
    Jan 30, 2012 at 23:22
  • This was a nice approach too. I considered using .not() with a function, but thought the :has selector looked a tad neater. And, as you say, nested tables throw it all to hell. :( Jan 30, 2012 at 23:22
  • @BumbleBee: In the worst case, you can use td:has(table) as selector. Jan 30, 2012 at 23:57
0

Try replacing

$('input:radio')

By

$('input[type=radio]')
2
  • These kind of selectors should be avoided but both are equivalent. Jan 30, 2012 at 22:21
  • Actually, there's a subtle difference: :radio is a jQuery extension, and therefore has slightly worse performance than [type="radio"] in modern browsers as it cannot take advantage of querySelectorAll. See the note in the documentation for this selector: api.jquery.com/radio-selector Jan 31, 2012 at 0:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.