How can I call a custom JavaScript function after a form has validated?

Question

I have a form for submitting events to our calendar. What I want is to call a function once the form has validated. Something like this:

1. User edits item
2. User clicks save button
3. Form validates successfully
4. Form is saved
5. Custom JavaScript function called
6. User is redirected like normal

Is this possible with JavaScript?

Answer 1

What I'm doing is that I change the "Source" parameter in the URL, so when the user saves the form, he's then redirected to a special HTML page that is doing some stuff, and after that redirected to the original page.

First, at the beginning of my form I call a JavaScript page that will:

1. record the actual "Source" into localStorage
2. stop the page loading
3. redirect to the same form but with a new "Source=" in the URL (e.g. "Source=/my/folder/my list/saving.html")

When the form is loaded with the correct "Source=" then, when the user will click "save", he will be redirected to "/my/folder/my list/saving.html". That page will show him a progress bar, and, in the background, I do some operations (for example I check if there is no conflict into the calendar). If everything is OK I use the saved "Source" from localStorage to redirect the user to the original source.

Answer 2

After a Save the page will get refreshed and the context is lost. The only option I can think of is to handle the button Save click event using jQuery.

Other workaround

1. Starting a Workflow on item create
2. Handling Event Receiver ItemAdded
3. Set SOURCE parameter so after item add it goes to a particular page. On that page add a window.load handler and execute the Script.

Answer 3

I know this post is old, but for anyone who has a similar use case for this. If you are launching your forms in the dialog, you can assign a function to the dialogReturnValueCallback property of the options object that you pass to your function that opens the dialog.

For example:

// Using the DialogOptions object
function showDialog() {
    var options = {
        title: "My Dialog Title",
        url: "/path/to/my/list",
        dialogReturnValueCallback: function(result) {
            // If the user clicks the 'Save' button
            if (result) {
                // Do something after the form is saved
            }
        }
    }
    SP.UI.ModalDialog.showModalDialog(options);
}

Answer 4

Try this approach:

<script src=".../SiteAssets/jquery-3.0.0.min.js"></script>
<script src="../SiteAssets/sputility.js"></script>

<script type="text/javascript">
 function PreSaveAction(){
     if(isFormValid()){

        alert('Do something');

        return true;
     }else{
         alert('Not do');

         return false;
     }


 }

 function isFormValid(){
    var result = true; 
    var formFieldsObj = SPUtility.GetSPFields();
    $.each(formFieldsObj, function( key, value ) {
        if(value.isRequired){
            var fieldValue = SPUtility.GetSPField(key).GetValue();
            if(fieldValue == null || fieldValue === ""){
                result = false;
            }
        }
    });

    return result;
 }
</script>