How to use PreSaveAction() in newform.aspx in SharePoint Online/2013/2016 List

This JavaScript SharePoint, We will disucss, how to use PreSaveAction() method in SharePoint list form in SharePoint 2013/2016/Online. We will see how to use PreSaveAction() in newform.aspx in SharePoint Online/2013/2016.

PreSaveAction() in SharePoint List

PreSaveAction() a JavaScript function that helps us to do something before the item will be saved. Suppose in the list form you want to do some validation check when a user clicks on the submit button then PreSaveAction() will be very much helpful. This method called before the form is submitted.

You can use PreSaveAction() in NewForm.aspx or EditForm.aspx in any SharePoint Online/2013/2016 list.

In this example, I have a SharePoint list which has a Title column which is a mandatory field. Now I am using PreSaveAction() JavaScript function to check whether Title is blank or not. If it is blank then it will display an alert message and it will not save the item. If Title is not blank then it will Save the item

Here I have using jQuery to retrieve a Title column value, but you can use SPUtility.js to retrieve the field value as well.

I have edited the NewForm.aspx and put the below code inside a Script editor web part.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict();
function PreSaveAction() {
var txtTitle = j(":input[title='Title']").val();
alert(txtTitle);
if(txtTitle == "){
alert("Please enter a title");
return false;
}
else{
return true;
}
}
</script>

Save the page and try to add an item to the SharePoint list. If your title is blank and you click on the Save button then it will show the alert like below:

PreSaveItem() in SharePoint List Form

This SharePoint tutoria, we will discuss, how to use PreSaveItem() in SharePoint 2013 list forms like NewForm.aspx and EditForm.aspx. The same way we can use PreSaveItem() in SharePoint 2013/2016/Online list forms.

Here I am trying to do some validation check before submitting an item. In the NewForm.aspx or in the EditForm.aspx, you can put the below code inside a script editor webpart.

<script type="text/javascript">
var j = jQuery.noConflict();
function PreSaveItem() {
var txtTitle = j(":input[title='Title']").val();
alert(txtTitle);
if(txtTitle == "){
alert("Please enter a title");
return false;
}
else{
return true;
}
}
</script>

Here, we learned how to use PreSaveItem() in SharePoint 2013 NewForm.aspx form. Same way, we can use PreSaveItem() in SharePoint 2013/2016/Online NewForm.aspx forms.

You may like SharePoint JavaScript tutorials:

• QR CODE Generator in SharePoint using JavaScript
• Show or Hide text box on dropdown selected index change event using HTML and JavaScipt
• How to show/hide columns based on value of SharePoint radio button
• Hide SharePoint list columns based on user permissions
• Display SharePoint list data in jQuery data table using Rest API
• Create a Custom Calendar in SharePoint using Rest API and jQuery
• Get current weather using JavaScript in SharePoint Online/2013/2016
• Hide content type field in edit form in SharePoint Online/2013/2016
• Customize suite bar in SharePoint Online/2013/2016

In the same way, you can use PreSaveAction() in editform.aspx page in SharePoint Online list. Hope this article will be helpful to you, to know more about how you can use presaveaction() in SharePoint 2013/2016/Online.