How to add HTML5 validation to Freeform Pro Composer Bootstrap template

Question

This is the code for a Freeform Pro Bootstrap Composer template. How to add HTML5 validation for all the possible 'required' instances: textfield, textarea, radios, checkboxes, selects?

Normally, in static Freeform templates I would use Bootstrap js validation. But when it comes to flexibility and ease of use for clients to compose forms with required fields it is more easy to use HTML5 validation as there are no variables required in scripts. And last but not least, it is much easier to use HTML5 validation in a multi language site.

So, I hope someone can help me with this: how to add HTML5 validation to this Freeform Pro Composer Bootstrap template?

    <style type="text/css">
    .freeform_composer .form-group.required .field_label:after { content: "*"; color: red; }
    .freeform_composer ul.dynamic_recipients { list-style: none; padding: 0; }
    .freeform_composer ul.dynamic_recipients label { font-weight: normal; }
    </style>
    <div class="freeform_composer">
    {composer:page}
    {composer:rows}
    <div class="row">
    {composer:columns}
    <div class="{if composer:column_total == "1"}col-sm-12{if:elseif composer:column_total == "2"}col-sm-6{if:elseif composer:column_total == "3"}col-sm-4{if:elseif composer:column_total == "4"}col-sm-3{/if}">
    {if composer:field_total == 0}&nbsp;{/if}
    {composer:fields}
    {if composer:field_type == 'nonfield_title'}
    <h3>{composer:field_output}</h3>
    {if:elseif composer:field_type == 'nonfield_paragraph'}
    {composer:field_output}
    {if:else}
    <div class="form-group{if composer:field_required} required{/if}">
    {if composer:field_label}
    {if composer:field_type == 'nonfield_captcha'}
    {if freeform:captcha}
    <label class="field_label" for="freeform_captcha">
        Captcha
    </label>
    {/if}
    {if:elseif composer:field_type == 'checkbox'}
    {!-- We'll display its label later down the page --}
    {if:else}
    <label class="field_label" {if composer:field_name != ''}for="freeform_{composer:field_name}"{/if}>
    {composer:field_label}
    </label>
    {/if}
    {/if}
    {if composer:field_output}
    {if composer:field_type == 'nonfield_captcha'}
    {if freeform:captcha}
    <div class="row">
    <div class="col-sm-6">
        <input type="text" name="captcha" id="freeform_captcha" class="form-control" placeholder="Enter the word you see in the image" />
    </div>
    <div class="col-sm-6">
        {freeform:captcha}
    </div>
    </div>
    {/if}
    {if:elseif composer:field_type == 'checkbox_group'}
    {freeform:field:{composer:field_name}
    wrapper_open="" wrapper_close=""
    row_wrapper_open="<div class='checkbox'><label>" row_wrapper_close="</label></div>"
    label_wrapper_open="" label_wrapper_close=""
    input_wrapper_open="" input_wrapper_close=""
    order="CL"
    attr:id="freeform_{composer:field_name}"
    }
    {if:elseif composer:field_type == 'checkbox'}
    <div class="checkbox">
    <label>
        <input type="hidden" name="{composer:field_name}" value="n" />
        <input type="checkbox" name="{composer:field_name}" id="freeform_{composer:field_name}" value="y">
        {composer:field_label}
    </label>
    </div>
    {if:elseif composer:field_type == 'radio'}
    {freeform:field:{composer:field_name}
    wrapper_open="" wrapper_close=""
    row_wrapper_open="<div class='radio'><label for='%id%'>" row_wrapper_close="</label></div>"
    label_wrapper_open="" label_wrapper_close=""
    input_wrapper_open="" input_wrapper_close=""
    order="RL"
    attr:id="freeform_{composer:field_name}"
    }
    {if:elseif composer:field_type == 'file_upload'}
    {composer:field_output}
    {if:elseif composer:field_type == 'nonfield_dynamic_recipients'}
    {composer:field_output}
    {if:elseif composer:field_type == 'nonfield_submit'}
    <button type="submit" class="btn btn-success">Submit</button>
    {if:elseif composer:field_type == 'nonfield_submit_previous'} {!-- for multi-page forms --}
    <input type="submit" name="submit_to_previous" value="Previous" class="btn btn-success" />
    {if:else}
    {freeform:field:{composer:field_name}
    attr:id="freeform_{composer:field_name}"
    attr:class="form-control"
    attr:placeholder="{composer:field_label}"
    }
    {/if}
    {/if}
    </div>
    {/if}
    {/composer:fields}
    </div>
    {/composer:columns}
    </div>
    {/composer:rows}
    {/composer:page}
    </div>

Answer 1

https://solspace.com/legacy_docs/freeform-4/composer/

"Using the HTML5 required attribute with composer

If you want to use the HTML5 required attribute with required fields in Composer you can use a conditional pair to check that it's required and is a custom field, then add the attributes to the field:"

<p>
{if composer:field_name AND composer:field_required}
    {freeform:field:{composer:field_name} attr:required="required" attr:class="required"}
{if:else}
    {composer:field_output}
{/if}
</p>

Answer 2

This works for a textfield and textarea.

    {freeform:field:{composer:field_name}
    attr:id="freeform_{composer:field_name}"
    attr:class="form-control"
    attr:placeholder="{composer:field_label}"
    {if composer:field_name AND composer:field_required}
    attr:required="required"
    {/if}
    }

But this does not work for a radiogroup, no required is added.

   {if:elseif composer:field_type == 'radio'}
   {freeform:field:{composer:field_name}
   wrapper_open="" wrapper_close=""
   row_wrapper_open="<div class='radio'><label for='%id%'>"       
   row_wrapper_close="</label></div>"
   label_wrapper_open="" label_wrapper_close=""
   input_wrapper_open="" input_wrapper_close=""
   order="RL"
   attr:id="freeform_{composer:field_name}"
   {if composer:field_name AND composer:field_required}                                                                 
   attr:required="required"
   {/if}
   }