set bootstrap "required" attribute on textarea only if specific radio button selected

Question

This is one of my first post here and I'm amateur at all of this, so please bear with me.

I do display a textarea with Jquery depending on a radio button selection (3 radio button so 3 hypothetical textarea).

I do set the bootstrap "required" attribute on them but, as only 1 among 3 is displayed, I cannot validate the form because the 2 other boxes are empty...

Any idea how to enable this attribute with Bootstrap or Jquery only on the displayed (active) textarea ?

Thanks for your help.

---

Here is the code:

<div class="form-row">
    <div class="col-md-12 mb-3">
        <label for="type_demande">Request type</label>

        <div class="custom-control custom-radio form-control-sm">
            <input type="radio" id="besoin_hw_remplacement" name="request_type" class="custom-control-input" value="hw_remplacement" required="" />
            <label class="custom-control-label" for="besoin_hw_remplacement">Replace X</label>
        </div>
        <div class="custom-control custom-radio form-control-sm">
            <input type="radio" id="besoin_sw_remplacement" name="request_type" class="custom-control-input" value="sw_remplacement" required="" />
            <label class="custom-control-label" for="besoin_sw_remplacement">Replace Y</label>
        </div>                      
    </div>
</div>  

<div class="form-group" id="hw_remplacement_details" style="display:none">
    <label for="details_projet">Replace X</label>
    <textarea class="form-control form-control-sm" id="details_projet" name="details_projet" rows="4" placeholder="Project Details X..." required="" /></textarea>
    <div class="invalid-feedback">
        Please give details
    </div>
</div>

<div class="form-group" id="sw_remplacement_details" style="display:none">
    <label for="details_projet">Replace Y</label>
    <textarea class="form-control form-control-sm" id="details_projet" name="details_projet" rows="4" placeholder="Project Details Y" required="" /></textarea>
    <div class="invalid-feedback">
        Please give details
    </div>
</div>  

<script type="text/javascript">
    $("input[name='request_type']:radio")
    .change(function() {
        $("#hw_remplacement_details").toggle($(this).val() == "hw_remplacement");
        $("#sw_remplacement_details").toggle($(this).val() == "sw_remplacement"); 
});
</script>   

Answer 1

Here is a solution, adjusted with your code :

    $("input[name='request_type']:radio")
    .change(function() {
    	$("#details_projet").prop("required", false);
        $("#hw_remplacement_details").toggle($(this).val() == "hw_remplacement");
        $("#sw_remplacement_details").toggle($(this).val() == "sw_remplacement");
        $("#"+$(this).val()+"_details #details_projet").prop('required',true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-row">
    <div class="col-md-12 mb-3">
        <label for="type_demande">Request type</label>

        <div class="custom-control custom-radio form-control-sm">
            <input type="radio" id="besoin_hw_remplacement" name="request_type" class="custom-control-input" value="hw_remplacement" required="" />
            <label class="custom-control-label" for="besoin_hw_remplacement">Replace X</label>
        </div>
        <div class="custom-control custom-radio form-control-sm">
            <input type="radio" id="besoin_sw_remplacement" name="request_type" class="custom-control-input" value="sw_remplacement" required="" />
            <label class="custom-control-label" for="besoin_sw_remplacement">Replace Y</label>
        </div>                      
    </div>
</div>  

<div class="form-group" id="hw_remplacement_details" style="display:none">
    <label for="details_projet">Replace X</label>
    <textarea class="form-control form-control-sm" id="details_projet" name="details_projet" rows="4" placeholder="Project Details X..." /></textarea>
    <div class="invalid-feedback">
        Please give details
    </div>
</div>

<div class="form-group" id="sw_remplacement_details" style="display:none">
    <label for="details_projet">Replace Y</label>
    <textarea class="form-control form-control-sm" id="details_projet" name="details_projet" rows="4" placeholder="Project Details Y" /></textarea>
    <div class="invalid-feedback">
        Please give details
    </div>
</div>

There are several changes :

1. Remove required="" from both <textarea> tags
2. Add $("#details_projet").prop("required", false); to the beginning of the change function
3. Add $("#"+$(this).val()+"_details #details_projet").prop('required',true); to the bottom of the change function