Plugin Planet

Premium WordPress Plugins

Here is a quick tutorial showing how to validate any USP Form with jQuery and Parsley 2.

Parsely is a nice jQuery script for validating forms. Once implemented, 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.


  • jQuery >= 1.8
  • USP Pro >= 1.8
  • Parsley 2

Step 0

If you were using the previous version of Parsley (1.x), make sure to remove all traces of the previous implementation, including the Parsley script and style and the bit of inline JavaScript added to your theme’s footer.php. Basically what we’re doing here is clearing the plate and starting fresh. For more information check out the Parsely 1 tutorial.

Step 1

Add the new Parsley 2 script to your jQuery-equipped theme. You can download it here (if unsure which script to download, just grab the default parsley.min.js will do fine). Repeat: jQuery must be loaded for Parsley to work.

Step 2

In USP Pro settings, visit Advanced > Custom Form Attributes and remove data-validate="parsley". This was used for Parsley version 1.x and is no longer required.

Step 3

In USP Pro settings, visit CSS/JS > Custom JavaScript and add the following code:

$('input:hidden, .usp-remember, .usp-submit').addClass('exclude');
window.ParsleyConfig = { excluded: ".exclude" };

Remember to save your changes.

Note: If the above code doesn’t work (e.g., “TypeError: undefined is not a function”), try the following:

jQuery('input:hidden, .usp-remember, .usp-submit').addClass('exclude');
window.ParsleyConfig = { excluded: ".exclude" };

The difference is the alias $ vs jQuery. Instead of using the alias, you could use noconflict.

Step 4

Add the Parsley 2 CSS to your theme. This can be done via the USP Pro settings, just visit CSS/JS > CSS/Styles and add the CSS to whichever style option that is enabled. Remember to save your changes.

Step 5

At this point, Parsley is implemented and should be working on any form field that includes a required (or required="required") attribute. Here is a quick summary of where/how those required attributes can be added to various fields:

  • USP Form Shortcodes accept a required attribute that can be set to true or false. So for example, [usp_name required="true"] will add the required attribute to the Name field.
  • USP Pro Custom Fields accept a data-required attribute that can be set to true or false. So for example, including data-required#true to your custom-field definition will add the required attribute to the custom field.
  • It also is possible to add fields and markup directly to the form. To validate any directly added fields, you can simply add required to the <input>.

Further, to explicitly exclude any field, you can add a class of .exclude. Note that in this tutorial, we are excluding all hidden fields using the previously added JavaScript (see Step 3):

$('input:hidden, .usp-remember, .usp-submit').addClass('exclude');

This snippet adds a class of .exclude to the specified selectors. You also can add the class directly to markup.

Using a callback function with Parsley 2

As a bonus, here is how to add/use a callback function with Parsley and USP Pro.

Step 1

Add the following markup to your form:

<div class="callout callout-warning hidden">
	<h3>Oh noes..</h3>
	<p>Please double-check the form:</p>
<div class="callout callout-info hidden">
	<h3>Form looks good!</h3>
	<p>You&rsquo;re all clear, kid!</p>

Feel free to customize things as desired.

Step 2

Make sure that a class of .hidden is included in your theme styles:

<style>.hidden { display: none; }</style>

Note that this rule is included with the default Parsley CSS.

Step 3

Add the following snippet of jQuery:

$('input:hidden, .usp-remember, .usp-submit').addClass('exclude');
window.ParsleyConfig = { excluded: ".exclude" };
$.listen('parsley:field:validate', function () { validateFront(); });

$('.usp-submit').on('click', function () {
var validateFront = function () {
	if (true === $('.usp-form').parsley().isValid()) {
	} else {

Note that this chunk of code would replace the one given in Step 3 above.

That’s it! With the markup, styles, and script now in place, visit your form and try submitting with an error and without any error — you should see the message at the top of the form change dynamically.


If you are getting a JavaScript error like, “TypeError: jQuery(…).parsley is not a function..”, make sure you are waiting until the DOM is ready before calling any functions. For example:

jQuery(document).ready(function() {

The dots ... represent any other JS codes that you might be using along with either of the techniques provided in the tutorial. Basically you can wrap any code you are using with the document-ready function and should be good to go.