USP Pro makes it easy to enable client-side form validation using Parsley.js. The default functionality works great for most forms, but you may want to go further with custom fields, advanced validation, and much more. This tutorial shows how to customize Parsley.js on supportive primary fields and custom fields. So you can dial in the perfect validation for your USP Forms.
Primary fields include “Post Title”, “Post Content”, “Post Tags”, and so forth. Most of the USP Quicktags (available on the “Edit USP Form” screen) add primary fields to your form. So once you’ve enabled Parsley.js, all primary fields will be validated automatically on the front-end.
And the default Parsley validation is great for most cases, but there may be scenarios where further customization is required. Fortunately, Parsley is well-documented and very flexible, enabling advanced customization for specific fields. Let’s look at an example:
Here some common primary fields used in USP Forms:
[usp_name] [usp_title] [usp_content]
When Parsley is enabled, these fields will be validated automatically when the form is submitted. By default, this includes the following types of validation:
- Required fields must not be empty
- The Challenge Question must be correct
This is a suitable configuration for most forms. But SO much more is possible if you want to customize and fine-tune form validation. An easy way to configure each field is to add Parsley data attributes to your form fields. For example, let’s customize the validation of the “Post Content” field by adding the
custom attribute to the
[usp_name] [usp_title] [usp_content custom="PUT PARSLEY ATTRIBUTES HERE"]
Now we can add some
data-parsley- attributes to customize how the field is validated:
[usp_name] [usp_title] [usp_content custom="data-parsley-trigger='keyup' data-parsley-minlength='50' data-parsley-maxlength='500' data-parsley-minlength-message='Minimum length warning..' data-parsley-validation-threshold='10'" max="null"]
Note that we also add
max="null" to the shortcode. This is necessary to disable the default
max attribute, which is required for the Parsley attributes to work properly.
Important! As shown in the previous example, always use single quotes for any attributes added via the
So now with these new attributes added via the shortcode, they will be included in the “Post Content” field markup on the frontend. For this example, the new Parsley attributes give us fine-grained control over the following:
data-parsley-minlength— Specify minimum number of characters required for the field
data-parsley-maxlength— Specify maximum number of characters required for the field
data-parsley-minlength-message— Specify the message displayed if not enough characters are added to the field
data-parsley-validation-threshold— Specify the number of characters before the field is validated
data-parsley-required-message— Specify the error message for required fields
To customize Parsley validation for custom fields, we basically do the same thing, only the syntax for custom fields is different. Let’s say we have a custom field defined as follows:
field#textarea|label#Custom Textarea|placeholder#Custom Textarea
This defines a Custom Textarea. Now let’s say that we want to customize how Parsley validates this field. Fore example, we can add some data attributes like so:
field#textarea|label#Custom Textarea|placeholder#Custom Textarea|data-parsley-trigger#keyup|data-parsley-minlength#50|data-parsley-maxlength#500|data-parsley-minlength-message#Minimum length warning..|data-parsley-validation-threshold#10
Here we are adding the same Parsley attributes as we did for primary fields (see previous section, above). This technique works for any Parsley attributes that you may want to add. Check the Parsley docs for a complete list of available attributes and more infos.
Important! When adding min/max attributes for Parsley, do NOT include either of the USP
For more information, check out defining and adding custom fields.