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

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:

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_content] shortcode:

[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 custom attribute.

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-trigger — Specify JavaScript event(s) that will trigger field validation
  • 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

And there are many other great Parsley attributes that can be added, so you can fine-tune and dial in the perfect form. For more ideas, check out some Parsley validation examples.

Custom 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 min or max attributes.

For more information, check out defining and adding custom fields.

Pro Tip: USP Pro version 2.8 and up include a complete set of Parsley localization files. Location: /usp-pro/js/parsley-i18n/

Related