Radio input required and other inputs

[Diielle]

Hello everyone,

I would need a form that has
a radio input with three options

• opt1
• opt 2
• opt 3
  One of 3 options must be selected.

If the user selects option 1 he must supply data A
if the user selects option 2 he must supply datum B and C
if the user selects opz 3 he must provide datum D and E

Something like this:

<div id="tipologia">
    <div class="form-check">
        <input name="tipologia" value="opt1" type="radio" id="opt1">
        <label  for="opt1">opt1</label>
    </div>
        <div class="form-group cmp-input">
            <label for="a">A</label>
            <input id="a" name="a" type="text">       
        </div>
    <div class="form-check">
        <input name="tipologia" value="opt2" type="radio" id="opt2">
        <label for="opt2">opt2</label>
    </div>
        <div class="form-group cmp-input">
            <label for="b">B</label>
            <input id="b" name="b" type="text">       
        </div>
        <div class="form-group cmp-input">
            <label for="c">C</label>
            <input  id="c" name="c" type="date">       
        </div>
    <div class="form-check">
        <input name="tipologia" value="opt3" type="radio" id="opt3">
        <label for="opt3">opt3</label>
    </div>
        <div class="form-group">
            <label for="d">D</label>
            <textarea id="d" name="d" rows="5"></textarea>
        </div> 
        <div class="form-group">
            <label for="e">E</label>
            <textarea  id="e" name="e" rows="5"></textarea>
        </div> 
</div>

My problem is not being able to define that radio input is required.

If I use addRequiredGroup on #tipologia I get an error because inside the element there are inputs other than checkboxes and radios...
I have tried putting inputs A, B, C, D, E inside the labels but nothing changes.
Can anyone help me?

Thank you

[Jodenee]

I ran into a similar issue like yours, maybe this example on the docs will help you.