Dialogue/Pop-Up on save if user is missing a required field

[Jonathan Stamper]

I have forms with many tabs, and when the user overlooks required fields and tries to save, I want to create a pop-up or use the SPJS modal dialogue that tells them they “missed required field a at tab 1.” I made this function below, and it works if I execute it in the console with no issue, but on save, it ignores it in favor of the error message below the required field. Could this be a timing thing, calling it incorrectly, using the wrong functions, or something else?

Sorry, I tried to do pic to text, but it didn’t work right, so I attached the picture of the code.

[Jonathan Stamper]

Oops I needed to fix the size

Attachments:

1. 

   IMG_6760.jpeg
   

[Alexander Bautz]

The PreSaveAction function will never run if the form has empty fields, but you can tap into the PreSaveItem function like this to run your custom code:

var originalPreSaveItem = PreSaveItem;
PreSaveItem = function(){
    // run custom function here
    // trigger original PreSaveItem
    originalPreSaveItem();
}

Alexander

[Jonathan Stamper]

You are the man thank you so much I will try that out and let you know.

One more question, do you know if it’s possible to prevent the user from refreshing or closing a form with a pop-up that lets them know they are about to close with unsaved changes?

[Alexander Bautz]

Sure, just add this to your custom js:

// Set this to false first
var hasSaved = false;

window.addEventListener("beforeunload", (event) => {
    if(!hasSaved){
      event.preventDefault();    
      event.returnValue = true;
    }
});

Now add this to the top of your dffs_PreSaveAction function:

// Set the variable to true to to disable the warning when the form is saved
hasSaved = true;

Alexander

[Jonathan Stamper]

Awesome! Thank you so much!

I got the PreSaveItem to give the pop-up but I can’t seem to get it to continue down the normal presave function to do it’s normal processing, put the red text under the missing field value or complete the save when all data has been populated. I thought calling the presave in the PreSaveItem would suffice but it doesn’t seem to catch it.

[Alexander Bautz]

The code to tap into the PreSaveItem function worked in my test, but you must ensure you run the originalPreSaveItem and not use “return” in the code above the call to this function.

Alexander

[Jonathan Stamper]

Got ya, I probably need to modify my logic a little to get it working. Cool, I’ll check it out more let know if I’m still hitting a snag.

Thank you so much for all the help.

Unfortunately, the browser is preventing the beforeunload to fire off from what I’m observing. All good though. Was more of a curiosity, esthetic than a need.

[Jonathan Stamper]

Ah dang, I think there may be a policy configuration on either the browser or SharePoint that prevents catching beforeunload. That’s alright. I was more interested in the logic and using as a nice to have anyway.

[Alexander Bautz]

I think there is a built in check in the browser that prevents the function to run in the form has not been modified – try changing at least one field and see if the code runs when you try to exit.

Alexander

[Author]

Posts