Plugin Planet

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

Parsley 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.

Requirements

• 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:

• Remove the Parsley JavaScript and CSS
• Remove the bit of inline JavaScript added to your theme’s footer.php
• Remove data-validate="parsley" from the setting, Advanced ▸ Custom Form Attributes

Basically what we’re doing here is clearing the plate and starting fresh. For more information check out the Parsley 1 tutorial.

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 any changes.

Step 2

Add the Parsley 2 JavaScript 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 before the Parsley script in order for Parsley validation to work.

Step 3

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. Alternately you can add the Parsely styles via your theme’s style.css or any other available method.

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.

Notes

By default, most form fields are “required” and include a required attribute. You can verify this by examining the markup of any USP Form. For reference, here is a quick summary of where/how the required attributes may be added or removed for any applicable 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>.

It’s also possible to add attributes such as required via JavaScript. Here is an example:

jQuery('.usp-input-title').attr('required', 'required');

Here we are adding a required attribute to the Title field. To remove an attribute, you can do something like this:

jQuery('.usp-input-title').removeAttr('required');

Here we are removing the required attribute from the Title field.

Using a callback function with Parsley 2

As a bonus, here is an example showing 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>
<div class="callout callout-info hidden">
	<h3>Form looks good!</h3>
	<p>You’re all clear, kid!</p>
</div>

Feel free to customize anything that’s contained inside either <div>. Just make sure that the <div> classes remain in place.

Step 2

Next, include a .hidden class via your theme or form styles:

.hidden { display: none; }

This will hide the callout text/markup when it is not being used.

Step 3

Lastly, add the following snippet of jQuery:

jQuery(document).ready(function($) {
	$('input:hidden, .usp-remember, .usp-submit').addClass('exclude');
	$('.usp-submit').on('click', function () {
		$('.usp-form').parsley({
			excluded: '.exclude'
		});
		validateFront();
	});
	$.listen('parsley:field:validate', function() { 
		validateFront(); 
	});
	var validateFront = function () {
		if (true === $('.usp-form').parsley().isValid()) {
			$('.callout-info').removeClass('hidden');
			$('.callout-warning').addClass('hidden');
		} else {
			$('.callout-info').addClass('hidden');
			$('.callout-warning').removeClass('hidden');
		}
	};
});

Aaaand done! With the markup, styles, and script now in place, visit your form and try submitting with and without errors — you should see the message at the top of the form change dynamically.