Hi everyone!
I noticed that the "forminputs.xyz.required = true" does not work with widgets.RadioSelect because for each choice a single input field is created in HTML. Is there a workaround to use the convenience of forminputs with RadioSelect as well or is the only option to set required = true through more extensive JS, picking all input fields by ID?

In the MWE below, the "forminputs.income_other_specific.required = true;" works perfectly fine while "forminputs.current_work.required = true;" does not work. The participant can advance without providing any answer to this question. Any ideas or workarounds?


Here is an MWE:

__init__.py:
......
class Player(BasePlayer):
    income_work = models.IntegerField(min=0, label="Income from work?")
    income_other = models.IntegerField(min=0, label="Other income source?")
    income_other_specific = models.StringField(
        label='Please specify this income source.',
        blank=True,
    )
    current_work = models.IntegerField(
        label="Are you unemployed at the moment?",
        choices=[
            [1, "Yes"],
            [2, "No"]
        ],
        widget=widgets.RadioSelect,
        blank=True,
    )


class Page(Page):
    form_model = 'player'
    form_fields = ['income_work', 'income_other', 'income_other_specific', 'current_work']    
    

Page.html:
....

<div>
    <label for="income_work">Income from work?</label>
    <input name="income_work" id="income_work" type="number" onkeyup="show_inc_other_spec()"/>
    {{ formfield_errors "income_work" }}
</div>

<div>
    <label for="income_other">Other income source?</label>
    <input name="income_other" id="income_work" type="number" onkeyup="show_c_work()"/>
    {{ formfield_errors "income_other" }}
</div>

<div id="inc_other_spec">
    {{ formfield "income_other_specific" }}
    {{ formfield_errors "income_other_specific"}}
    <br>
</div>

<div id="c_work">
    {{ formfield "current_work" }}
    {{ formfield_errors "current_work" }}
    <br>
</div>

<script>
    function show_inc_other_spec () {
            let inc_other = document.getElementById('income_other').value;
            if (parseInt(inc_other)>0) {
                document.getElementById('inc_other_spec').style.display = 'block';
                forminputs.income_other_specific.required = true;
            } else {
                document.getElementById('inc_other_spec').style.display = 'none';
                forminputs.income_other_specific.required = false;
            }
        }
    
    function show_c_work () {
            let inc_work = document.getElementById('income_work').value;
            if (parseInt(inc_work)===0) {
                document.getElementById('c_work').style.display = 'block';
                forminputs.current_work.required = true;
            } else {
                document.getElementById('c_work').style.display = 'none';
                forminputs.current_work.required = false;
            }
        }
    

</script>

for (let radio of forminputs.current_work) {
    radio.required = false;
}

Also make sure you are updated to the latest oTree, because it will throw an error to alert when setting an invalid attribute on a forminput.