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: Disable Browser Autofill

If for testing or any reason, you need to disable the browser’s automatic fill (autofill) of field values. According to the MDN documentation here, the browser’s autofill can be disabled by adding autocomplete="off" to the form element. With USP Pro, you can add this attribute (or any attribute) via the Advanced settings ▸ “Custom Form Attributes”.

Note that adding autocomplete="off" to the form element doesn’t work for all fields. Also whether or not it works for any particular browser varies as time moves forward. See this thread for more information, workarounds and techniques.

Related