HOW TO: Some simple steps for using ParsleyJS field validation with native SharePoint list forms

2014 02 03 MV  to All:
SCENARIO: You’ve got a SharePoint list with upwards of 100+ columns, and you’ve created numerous custom edit forms for editing subsets of these columns – only when users do use these custom edit forms, there are fields you need to (suddenly) become REQUIRED…

:-\

What do I mean? Let’s look at an example…

Consider a custom list named “Processes” (you’ll see this again in an upcoming article) whose items are instances of a large, complex business process. Many columns are (say) decision-type columns, with each having its own custom EditForm an associated Notes field.

Follow me thus far?

Here’s a screenshot:

ParsleyJS Blog - Processes List

Say the process reaches a point where the custom Decision2 Edit Form needs to be used. When that happens, you need the associated Decision2 Notes field to suddenly become REQUIRED – HOW would you do this in native SharePoint?

Answer: I don’t know. 😐

SharePoint natively can make this Design Review Notes field required ALWAYS, or NOT at all – but it can’t make it required only sometimes. And for those of you who have figured out a logic-based way to do this using only validation formula, I’ll alter my claim to just “not easily, nor elegantly” ;-)…

What to do?

Solution: ParsleyJS is a wildly-popular jQuery-based field validation library which a multitude of SharePoint developers enjoy – but mostly when they’re able to build from-scratch edit forms. WHAT IF you wanted to use the native SharePoint EditForm.aspx form – the one you get for FREE (automatically) whenever you build a new list?

What’s worked for me is this:

  1. BUILD the custom edit form using SharePoint Designer (this works in SPD2010 or SPD2013 – I’ve confirmed it);
  2. BROWSE to the form
  3. EDIT the form in the browser
  4. ADD a Content Editor Web Part (CEwp)
  5. CONFIGURE the CEwp to point an .htm file store in your site, and containing the jQuery/ParsleyJS logic to validate the form on-the-fly
  6. CODE the ParsleyJS to DISABLE THE SAVE BUTTON rather than try to trap the Form.Submit event and prevent the submit. Doing so is both troublesome and pointless, as in the end it makes far more sense to prevent the Save button from even being used!
  7. SAVE the modified custom edit form – you’re done!

Turns out this is a LOT easier to accomplish, PLUS it provides a VISUAL indicator to The User that they will NOT be able to submit the form, PLUS on native SharePoint forms there is NO other means of submitting the form (clicking the Enter key does NOT trigger Form.Submit).

Here’s what the final code looks like, all contained in an easy-to-wire Content Editor Web Part (CEwp):

BEGIN CODE for Decision2FieldValidationjQueryParsleyJS.htm file

<style type="text/css">
	.required{
		color: red;
	}
</style>

<script type="text/javascript" src="https://netrixonline.sharepoint.com/Demos/BPMA/SiteAssets/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://netrixonline.sharepoint.com/Demos/BPMA/SiteAssets/parsley.js"></script>

<script type="text/javascript">
	//$(window).load(function(){
	$(document).ready(function(){

		//BIND parsley to validate the dynamically-created form...
		$( 'form' ).parsley();

		//CREATE a jQuery selector which captures the Notes field element (not a true <input> element), and adds the attribute "required" to it...
		$( 'TEXTAREA[title="Decision2 Notes"]' ).parsley( 'addConstraint', { required: 'required' } );

		//VALIDATE the form initially...
		if (  !($( 'form' ).parsley('validate'))  ) {
			//IF INvalid, DISABLE all Save buttons...
			$('input[value="Save"]').attr('disabled', 'disabled');
		}
		else {
			//IF valid, ENABLE all Save buttons...
			$('input[value="Save"]').removeAttr('disabled');
		}

		//ADD an event listener for the onFieldError event, disabling the Save buttons based on outcome...
		$( 'form' ).parsley( 'addListener', {
			onFieldError: function (e){
				//DISABLE all Save buttons...
				$('input[value="Save"]').attr('disabled', 'disabled');
			}
		});

		//ADD an event listener for the onFieldSuccess event, and enable the Save buttons based on outcome...
		$( 'form' ).parsley( 'addListener', {
			onFieldSuccess: function (e){
				//ENABLE all Save buttons...
				$('input[value="Save"]').removeAttr('disabled');
			}
		});
	});
</script>

END CODE

UPLOAD this file to whatever SharePoint library you use to store and reference scripts for your Content Editor Web Parts. In this example I’ll use the local website’s Site Assets library:

ParsleyJS Blog - Site Assets Library

NEXT we’ll browse to the custom Decision2Form. aspx page – the custom form whose fields we want to validate on-the-fly only when the form is actually used (displayed):
ParsleyJS Blog - custom form w no validation

Here we’ll use the browser to EDIT the form, adding a CEwp (named in some self-describing manner), and referencing our script file back in the Site Assets library:
ParsleyJS Blog - custom form in edit modeParsleyJS Blog - custom form w CEwp configured

Once the jQuery/ParsleyJS code has been wired into the CEwp, and the CEwp added to the form, whenever the form displays, then code executes, immediately performing custom field-level validation on-the-fly, and – in this case – disabling the Save button whilst displaying an intuitive error message:

ParsleyJS Blog - custom form w parsleyJS in CEwp

COOL PART – ParsleyJS by default triggers validation on CHANGED fields, so as soon as you start typing in the Notes field, Parsley re-validates the form, hides the error message, and enables the Save button – quickly indicating to The User they’ve done something right! :-)

ParsleyJS Blog - custom form w parsleyJS enabling Save btn

AFTER saving, the details appear in the Processes list:
ParsleyJS Blog - custom form w parsleyJS after Notes saved

ParsleyJS is capable of performing LOTS of other type of validations – checking for SSN format, email formatting, minimal amount of text, and lots more.
You can learn about ParsleyJS here:  http://parsleyjs.org/

Hope others find this simple, elegant approach to field validation useful as much as I did.

Peace,

-MV

Acknowledgements: Many thanks to my excellent friend & colleague Kiran Kakanur for turning me on to Parsley :-)

Leave a Reply

Your email address will not be published. Required fields are marked *