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:
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:
- BUILD the custom edit form using SharePoint Designer (this works in SPD2010 or SPD2013 – I’ve confirmed it);
- BROWSE to the form
- EDIT the form in the browser
- ADD a Content Editor Web Part (CEwp)
- 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
- 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!
- 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
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:
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:
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 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.
Acknowledgements: Many thanks to my excellent friend & colleague Kiran Kakanur for turning me on to Parsley