Custom Form Validation

This guide shows how to integrate common client-side form validation frameworks such as Bootstrap, Parsley.js and Foundation Abide.

• Parsley.js
• Bootstrap
• Foundation Abide

Parsley.js

Parsley is a very well documented and capable form validation Javascript library. This guide will show you how to implement form validation for your Freeform forms with Parsley.

This guide assumes you are running Parsley on your web pages. Usually this just means including the parsley.js or parsley.min.js file in your source code. Parsley relies on jQuery as well, so be sure that is included in your site as well before you follow the next steps.

You can implement Parsley validation for your form 1 of 2 ways...

Form Builder

You can add the necessary attributes to your forms with the form builder. Follow the instructions below to see how.

1

Inside the form builder for the applicable form, go to the Settings tab.

At the bottom of the General section in the Settings tab, there's an area called Attributes. In the Form tab, add data-parsley-validate in the Attribute column and leave the Value column empty (or specify true). This will trigger the Parsley validation.

Attribute	Value
data-parsley-validate

2

To add Parsley attributes to fields, go to the Layout tab of the form builder, click on any field, and in the property editor on the left, you'll see an Attributes settings area. You will likely be appling these attributes to the Input tab.

For example:

1. In the Input tab, add required to the Attribute column and leave the Value column empty (or specify true) to make the field required.
   • Merely toggling on the Require this field setting is not sufficient to trigger Parsley, as it's intended just for Freeform's own validation.
2. You can also add extra validations like data-parsley-maxlength="20" (data-parsley-maxlength in Attribute column and 20 in Value column) or data-parsley-type="number" to trigger more complex built-in validations as seen here.

   Attribute	Value
   required
   data-parsley-type	number
   data-parsley-maxlength	20

3

Render your form builder-based form in a Twig template as usual.

{{ freeform.form("myForm").render() }}

Template Level

You can add the necessary attributes and changes to your forms directly inside your Twig templates with the Freeform form.renderTag(). Follow the instructions below to see how.

1

Add the data-parsley-validate attribute to your form using the renderTag() method like this:

{% set form = freeform.form("parsleyForm", {
  formAttributes: { "data-parsley-validate": true }
}) %}
{{ form.renderTag() }}
  ...
{{ form.renderClosingTag }}

2

To set field level attributes, you can apply them directly to your form field inputs or field.render. Usually it's more convenient to set these inside the Freeform control panel form builder area, but you can still control these at the template level if you want. Your template code might look something like this:

{% set form = freeform.form("parsleyForm", {
  formAttributes: { "data-parsley-validate": true }
}) %}
{{ form.renderTag() }}
  {% for row in form %}
  <div>
    {% for field in row %}
    <div>
      {% set attr = {} %}
      {% if field.required %}
        {% set attr = attr|merge({'required':true}) %}
      {% endif %}
      {% if field.type == 'number' %}
        {% set attr = attr|merge({'data-parsley-type':'number'}) %}
      {% endif %}
      {{ field.render({
        inputAttributes: attr
      }) }}
    </div>
    {% endfor %}
  </div>
  {% endfor %}
{{ form.renderClosingTag }}

Bootstrap

Bootstrap is the most widely used HTML framework. It includes a low level of form validation which you can trigger for your forms. This guide will show you how to implement form validation for your Freeform forms with Bootstrap validation.

This guide assumes that you have a Bootstrap 4 based website which includes Bootstrap CSS and JS files.

You can implement Bootstrap validation for your form 1 of 2 ways...

Form Builder

You can add the necessary attributes to your forms with the form builder. Follow the instructions below to see how.

1

Inside the form builder for the applicable form, go to the Settings tab.

At the bottom of the General section in the Settings tab, there's an area called Attributes. In the Form tab, add novalidate in the Attribute column and leave the Value column empty (or specify true). This will disable HTML form validation in your web pages and allow Bootstrap to take over. Also add a form class like needs-validation so you can then trigger validation on your form by targeting this class as below.

Attribute	Value
novalidate
class	needs-validation

2

Render your form builder-based form in a Twig template as usual.

{{ freeform.form("myForm").render() }}

3

At the bottom of your page, add javascript to attach validation to your form(s). Note the example class needs-validation. This needs to match the class name you set on your form inside the form builder in the steps above.

<script>
  // Example starter Javascript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>

Template Level

You can add the necessary attributes and changes to your forms directly inside your Twig templates with the Freeform form.renderTag(). Follow the instructions below to see how.

1

Add the novalidate attribute to your form using the renderTag() method. This disables HTML validation.

Add a class like needs-validation to your form using the renderTag() method. You'll target this with JS later. Your code now should look something like this:

{% set form = freeform.form("myForm", {
  formAttributes: { "novalidate": true, 'class': 'needs-validation' }
}) %}
{{ form.renderTag({}) }}
  ...
{{ form.renderClosingTag }}

You can also set the class for the form with the class parameter.

2

To set field level attributes, you can apply them directly to your form field inputs or field.render. Usually it's more convenient to set these inside the Freeform control panel form builder area, but you can still control these at the template level if you want. Your template code might look something like this:

{% set form = freeform.form("myForm", {
  formAttributes: { "novalidate": true, 'class': 'needs-validation' }
}) %}
{{ form.renderTag({}) }}
  {% for row in form %}
  <div>
    {% for field in row %}
    <div>
      {% set attr = {} %}
      {% if field.required %}
        {% set attr = attr|merge({'required':true}) %}
      {% endif %}
      {{ field.render({
        inputAttributes: attr
      }) }}
    </div>
    {% endfor %}
  </div>
  {% endfor %}
{{ form.renderClosingTag }}

3

At the bottom of your page, add javascript to attach validation to your form(s). Note the example class needs-validation. This needs to match the class name you set on your form inside the form builder in the steps above.

<script>
  // Example starter Javascript for disabling form submissions if there are invalid fields
  (function() {
    'use strict';
    window.addEventListener('load', function() {
      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('needs-validation');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {
          if (form.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
          }
          form.classList.add('was-validated');
        }, false);
      });
    }, false);
  })();
</script>

Foundation Abide

The Abide plugin for Zurb Foundation extends native HTML form validation. This guide will show you how to implement form validation for your Freeform forms with Abide.

This guide assumes you are running Foundation 6 and have the Abide plugin correctly installed on your web page.

You can implement Foundation Abide validation for your form 1 of 2 ways...

Form Builder

You can add the necessary attributes to your forms with the form builder. Follow the instructions below to see how.

1

Inside the form builder for the applicable form, go to the Settings tab.

At the bottom of the General section in the Settings tab, there's an area called Attributes. In the Form tab, add novalidate in the Attribute column and leave the Value column empty (or specify true). This will disable HTML form validation in your web pages and allow Foundation Abide to take over. Also add data-abide in the Attribute column and leave the Value column empty (or specify true). This triggers Abide level validation.

Attribute	Value
novalidate
data-abide

2

To add Parsley attributes to fields, go to the Layout tab of the form builder, click on any field, and in the property editor on the left, you'll see an Attributes settings area. You will likely be appling these attributes to the Input tab.

For example:

1. In the Input tab, add required to the Attribute column and leave the Value column empty (or specify true) to make the field required.
   • Merely toggling on the Require this field setting is not sufficient to trigger Abide, as it's intended just for Freeform's own validation.
2. You can also add extra validations like number or email to trigger more complex predefined patterns as seen here. Note that some attributes may have blank values, and that's okay.

   Attribute	Value
   required
   pattern	email

3

Render your form builder-based form in a Twig template as usual.

{{ freeform.form("myForm").render() }}

Template Level

You can add the necessary attributes and changes to your forms directly inside your Twig templates with the Freeform form.renderTag(). Follow the instructions below to see how.

1

Add the novalidate and data-abide attributes to your form using the renderTag() method like this:

{% set form = freeform.form("myForm", {
  formAttributes: { "novalidate": true, "data-abide": true }
}) %}
{{ form.renderTag({}) }}
  ...
{{ form.renderClosingTag }}

2

To set field level attributes, you can apply them directly to your form field inputs or field.render. Usually it's more convenient to set these inside the Freeform control panel form builder area, but you can still control these at the template level if you want. Your template code might look something like this:

{% set form = freeform.form("foundationForm", {
  formAttributes: { "novalidate": true, "data-abide": true }
}) %}
{{ form.renderTag({}) }}
  {% for row in form %}
  <div>
    {% for field in row %}
    <div>
      {% set attr = {} %}
      {% if field.required %}
        {% set attr = attr|merge({'required':true}) %}
      {% endif %}
      {% if field.type == 'number' %}
        {% set attr = attr|merge({'pattern':'number'}) %}
      {% endif %}
      {{ field.render({
        inputAttributes: attr
      }) }}
      {% if field.required and field.type == 'number' %}
        <span class="form-error">
          This field is required and must be numeric.
        </span>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endfor %}
{{ form.renderClosingTag }}