0

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>
0

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>
| improve this answer | |
  • How to add validation for radio's and checkboxes? I tried the same approach, but no 'required' is added in the form, see code example. – Sjoerd Apr 6 '16 at 7:22
  • Try the conditional as a single, not a complex, i. e. no {if:elseif ...} Looks like you have nested conditionals, which is where I'll guess your issues lie. Break it down to it's simplest, working form and then add back conditionals. – Jim Wyse Apr 6 '16 at 12:12
  • The Bootstrap composer form is provided by Solspace, I have no idea what to change without breaking the form. – Sjoerd Apr 6 '16 at 12:32
  • Make a copy of it. You can have as many composer templates as you like. You then assign them to the form. – Jim Wyse Apr 6 '16 at 12:35
  • The composer form is too complex, really don't know where to start altering things. I tried, but it breaks the form. Besides that the 'required' conditional for a normal textfield works fine and it is also wrapped in if:elseif. I just got stuck with this... – Sjoerd Apr 6 '16 at 13:25
0

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}
   }
| improve this answer | |
  • Also, there are custom tags for errors and validation. See {freeform:general_errors} You can display errors with each field or in a box at the top of the form. – Jim Wyse Apr 1 '16 at 17:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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