This tutorial explains how to enable Parsley.js in USP Pro version 2.6 and better. Parsley.js is a script that enables front-end form validation, which helps users submit form data accurately and efficiently.

Parsley is a great jQuery script for validating forms. Once enabled, parsley.js prevents form submission until all required fields are completed properly. This saves the user time and ensures that you’re getting the required data.

Requirements

  • jQuery >= 1.8
  • USP Pro >= 2.6

Step 1

Visit Advanced ▸ Custom Form Attributes and make sure that the following attributes are included:

data-parsley-validate data-persist="garlic"

Remember to save changes.

Step 2

Visit the CSS/JS settings and enable the following options:

  • External Stylesheet (includes the required Parsely CSS)
  • Include Parsley.js (includes the required Parsley JavaScript)

Remember to save changes.

Done!

At this point, Parsley is implemented and should be working on any form field that includes a required (or required="required") attribute. Also keep in mind that there are many ways to customize Parsley. Check out the Parsley.js documentation to learn more.

Pro Tip: If you need to disable form validation for testing or whatever, visit Advanced ▸ Custom Form Attributes, and add the novalidate attribute.

Change Language

By default Parsley displays in English. To change the language simply add the following code directly to your USP Form:

<script src="https://example.com/wp-content/plugins/usp-pro/js/parsley-i18n/fr.js"></script>

As-is, that line will enable the French language. To change that, replace fr with the abbreviation for your language. Here is a list of available languages for Parsley.js. Also: make sure the URL and path are correct in the above code, according to your WordPress installation directory.

Related