SharePoint2013: How to use of PreSaveAction() on list forms

This SharePoint tutorial, we will check, how to use PreSaveAction() method in the SharePoint list form in SharePoint 2013. PreSaveAction() a JavaScript function that helps us to do something before the item will be saved.

PreSaveAction() in SharePoint

PreSaveAction function allows overriding functionality when the Save button is clicked. PreSaveAction() executes the code written for validation on the click of the save button.

I just want to add one thing, you should override PreSaveItem – this is a SharePoint built-in function. Instead, as mentioned above – override/create PreSaveAction.

I have a default SharePoint list form with a save or cancel button, I want the user to attach files while creating a new item. When the user clicks on the save button, the page postback happens and if validation fails, validation message is displayed.

I used the below code with PreSaveAction function for validation to display messages on the Save button click and Save button, attach runtime custom handler. Default Save button calls PreSaveItem method, which in turn calls PreSaveAction for any validations.

$(document).ready(function () {
ProducerReferral();
attachEventHandlers();// function for checking the duplication of files
$(‘input[value=Save]’).click(function () {
PreSaveTest ();
});
});

function PreSaveTest()
{
PreSaveAction();
}

function PreSaveAction() {
if($("#idAttachmentsRow").css("display")=="none"){
$("#part1 > h4")[1].innerHTML += "<span style=’margin-left: 40px;’ class=’ms-formvalidation ms-csrformvalidation’>Please Attach Files.</span>";
returnVal = false;
}
else { return true ;}
}

This method is called when the save button is clicked and messages are displayed in the case of File not attached.

Note: If you are using “$(document).ready” in your code, make sure the PreSaveAction function is written outside this block, as in the above code or else the PreSaveAction method will not be called.

You may like following SharePoint tutorials:

• Change column ordering in list forms in SharePoint
• $(document).ready(function() not working SharePoint 2013/2016 list form
• Change Column Order in List Forms (new/edit/display) in SharePoint
• How to reset to out of box list forms from Nintex Forms customization in SharePoint Online
• SharePoint 2013 Different JQuery Operations on SharePoint List Form
• Open SharePoint 2013 list form in dialog box on button click using JavaScript
• Customize SharePoint 2013 list form using SharePoint designer 2013
• SharePoint: Rename Save or Cancel button text on List Forms
• SharePoint: PreSaveItem() in NewForm.aspx list form
• Show Hide List form fields based on condition using SPUtility in SharePoint 2013
• Show hide fields based on permission in SharePoint list form using Client Object Model
• Disable Save button in list form in InfoPath 2013 in SharePoint 2013/Online

Here, we learned how to use PreSaveAction() in SharePoint list forms.