Form Validation with Parsley

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.

TIP

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 that will also be running by the time you follow the next steps.

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

Inside Freeform Composer (CP)

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

  1. Open up an existing form inside Freeform and go to the Form Settings tab (cog/gear icon).
  2. At the bottom of the settings tab, there's an area called Form tag Attributes. 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
  3. For the rest of your fields, add attributes to them in the Composer interace as needed. To add attributes to fields, simply click the field in the middle layout column, and in the right side Property Editor column, you'll see an Input attributes settings area. For example:
    • Add required to the Attribute column and leave the Value column empty (or specify true) to make the field required.
      • Merely checking the This field is required checkbox is not sufficient to trigger Parsley, as it's intended just for Freeform's own validation.
    • 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
  4. Render your Composer-based form in a Twig template as usual.
    {{ craft.freeform.form("parsleyForm").render() }}
    
    1

That's it!

At 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 = craft.freeform.form("parsleyForm", {
        formAttributes: { "data-parsley-validate": true } 
    }) %}
    {{ form.renderTag({}) }}
    ...
    {{ form.renderClosingTag }}
    
    1
    2
    3
    4
    5
    6
  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 Composer area, but you can still control these at the template level if you want. Your template code might look something like this:

     






     
     
     
     
     
     
     
     
     
     






    {% set form = craft.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 }}
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23

That's it!

Last Updated: 11/6/2019, 8:15:23 AM