Custom PreSave with SharePoint validation first

Question

I'm working on a list new form where the user is going to create both a list item and a taxonomy term with custom properties. I'm using JSOM to create the taxonomy term with custom properties and I need to pause the actual save until the asynchronous call returns. I'm using this trick to "save" the original save function and add MyPreSave() to the save buttons.

var originalSaveButtonClickHandler = function(){};

_spBodyOnLoadFunctionNames.push("clickSave");

function clickSave(){var a=jQuery("[name$='diidIOSaveItem']");a.length>0&&(originalSaveButtonClickHandler=a[0].onclick),jQuery(a).attr("onclick","MyPreSave()")}

Then I have something like this

function MyPreSave(){

   var ctx = SP.ClientContext.get_current();
   .... rest of code ....
   .done(function(){
       console.log("All ready");
       originalSaveButtonClickHandler();
   });
}

It is working well, except for the form validation. The form validation -- required fields, my own validation rules, resolved users -- happens after I've created the taxonomy term.

I found this thread which shows how to use SPClientForms.ClientFormManager.SubmitClientForm('WPQ2') That does trigger the evaluation, but it also submits it if the validation passes.

Other than that I'm pretty much finding that everyone says it can't be done. Just want to check that is so and that I'll have to make my own validation functions?

score 1 · Answer 1 · answered Aug 25 '17 at 05:23

If i understand this right, you need to perform some validation before you call the save action. So one way to do that is use PreSaveItem action. Add your validations in PreSaveItem. This is triggered on clicking on submit and before PreSaveAction Out-of-the-box PreSaveItem doesn’t do anything, but on every form save action, SharePoint checks if PreSaveItem return false. You can find the definition of PreSaveItem function in FORMS.JS file.

function PreSaveItem()
{   
   if ("function"==typeof(PreSaveAction))
   {
      return PreSaveAction();
   }
   return true;
}

I want to use the SharePoint validations, but stop if they pass and do something before I actually save and close the item. There doesn't seem to be a way to just trigger the built in validations without actually saving. — Rothrock, Aug 25 '17 at 14:36

score 0 · Accepted Answer · answered Aug 29 '17 at 15:11

Here is the solution we've implemented. It is a bit of a hack and a bit of a workaround. I hope someone has something better than this.

We added a required number column called ErrorCount and hid it on the forms using csr. So the all the html for the column is on the form, but it is hidden from the user.

On the form we use code from this thread to capture the original click handler from the save button and save it in a different function and trigger our custom validation function on click. Like this:

var originalSaveButtonClickHandler = function(){};

$(document).ready( function () {
  var saveButton = $("[name$='diidIOSaveItem']")
  if (saveButton.length > 0) {
    originalSaveButtonClickHandler = saveButton[0].onclick;
  }
  $(saveButton).attr("onclick", "ValidateForm()");
});

This calls ValidateForm when the user clicks and that function, among other things, clears any value in the required ErrorCount field, submits the form to SharePoint validation, and then counts the errors on the form. Using this code.

$('input[title="ErrorCount Required Field"]').val('');
var b = SPClientForms.ClientFormManager.SubmitClientForm(formUniqueId);

SubmitClientForm() always returns true, so it can't be used to determine if the form is actually validated and if the are no errors it will just proceed along, save, and close the form.

But, there will always be at least one error, because ErrorCount is required, has just been cleared, and is hidden from the user. So that stops the form from actually submitting. We then use jQuery to check if there are any SharePoint errors on the page. If there is only one we know it is the hidden ErrorCount field and that the form is actually good and we can proceed with what we need to do, fill in a value for the required ErrorCount column, and finally submit. Here is the code for that part.

// find any empty required fields and any managed metadata that are invalid
var $errs = $('span[id^="Error_"],span.invalid-text,span.sp-peoplepicker-errorMsg');

if ($errs.length===1){                               
    // there is only one error which is the hidden error field
    // so we are good to proceed
    $('input[title="ErrorCount Required Field"]').val(0);

    MyForms.launchWorkflow()
    .done(function(){
        originalSaveButtonClickHandler();
    });
}

In that selector, span[id^="Error_"] finds most of the "You can't leave this blank" or other validation warnings, span.invalid-text finds any taxonomy fields that have invalid terms in the field, but are otherwise filled in, and span.sp-peoplepicker-errorMsg finds any people pickers that have something wrong with them.

The MyForms.launchWorkflow() is an asynchronous ajax call to start a workflow on the item and do a few other things behind the scenes before the item is actually saved. Once it is done, then we call the original save function that we saved earlier, and because the we have filled in the ErrorCount column it will actually save.

Custom PreSave with SharePoint validation first

2 Answers2

Linked