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

Update! This tutorial is for Parsley version 1 (for USP Pro < 1.8), and is no longer recommended. Please use this technique for Parsley 2 with USP Pro 1.8 and up.

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.

Step 1

Include jQuery and parsely.js. Many WordPress themes already include jQuery, and you can grab parsley.js and include in your theme.

Step 2

Include this snippet of JavaScript in your theme’s footer.php file, just before the closing <body> tag. Or you could include via some other avenue, such as the functions.php file or external JavaScript file.

<script>
	jQuery(document).ready(function($) {
		$('.usp-form').parsley();
	});
</script>

At this point, the script should be set up and working. To verify that it is working, use the code inspector of your browser to view the form fields while trying to submit it with empty field values. You will see that the script is dynamically adding markup to use for displaying any errors or warnings.

Step 3

Next we need to style the markup that the script is adding to validate the forms. You can use any CSS that makes sense for your design, but there are some basic styles that need applied to display the validation messages. Fortunately, the parsley.js site provides the following styles to get you going:

input.parsley-success,
select.parsley-success,
textarea.parsley-success {
  color: #468847;
  background-color: #DFF0D8;
  border: 1px solid #D6E9C6;
}

input.parsley-error,
select.parsley-error,
textarea.parsley-error {
  color: #B94A48;
  background-color: #F2DEDE;
  border: 1px solid #EED3D7;
}

.parsley-errors-list {
  margin: 2px 0 3px 0;
  padding: 0;
  list-style-type: none;
  font-size: 0.9em;
  line-height: 0.9em;
  opacity: 0;
  -moz-opacity: 0;
  -webkit-opacity: 0;

  transition: all .3s ease-in;
  -o-transition: all .3s ease-in;
  -ms-transition: all .3s ease-in-;
  -moz-transition: all .3s ease-in;
  -webkit-transition: all .3s ease-in;
}

.parsley-errors-list.filled {
  opacity: 1;
}

There are numerous ways to include this CSS in your pages, check the WP Docs for a good overview. Once included, refresh the page and try submitting the form with some empty fields. Then customize and fine-tune as needed to suit your design. As you’ll see, validating form data using parsley (or other technique) can help to improve the user experience and help ensure the accuracy of collected information.

Important: after implementing, you may have to clear browser/force refresh page to see changes take effect.

Notes

If you need to exclude a specific field, you can do something like this:

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