Adding form validation in a SharePoint List using the PreSaveAction function...
Category SharePoint
So one of my users wanted to have an edit validation in a simple List where one field would be required if a second field had a value in it. Unfortunately, simple Lists don’t allow that cross field validation, and the users tend to mess around with this List a lot. I didn’t want to spend a lot of effort customizing it and getting saddled with the maintenance from here on out.
After a lot of searching and head-banging, I finally found where I could put code in the NewForm.aspx and EditForm.aspx pages to allow for JavaScript validation without changing the overall structure and design.
The green code is what I added to each of the pages. The PreSaveAction function in the SharePoint JavaScript libraries is one of those functions that doesn’t execute when the page is saved unless you add your own code. Therefore, it makes for a great hook to add your own JavaScript validation code. It’s added right after the PlaceHolderMain line, and consists of whatever you need the form to do. In this case, I used the getTagFromIdentifierAndTitle function that is pretty common when you search for this type of solution. That allowed me to get the value of the two fields I needed to examine. Once the values were obtained, I did a simple compare and returned false if the validation failed.
This URL explains the getTagFromIdentifierAndTitle function: http://blogs.msdn.com/b/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx
This URL explains the PreSaveAction function: http://www.sharepointdevwiki.com/display/public/SharePoint+JavaScript+Functions+Overview
<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<SharePoint:ListFormPageTitle runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:ListProperty Property="LinkTitle" runat="server" id="ID_LinkTitle"/>:
<SharePoint:ListItemProperty id="ID_ItemProperty" MaxLength=40 runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
<IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt="">
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script language="javascript" type="text/javascript">
function PreSaveAction() {
var date1 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","Date Product Completed");
var dropdown1 = getTagFromIdentifierAndTitle("select","DropDownChoice","Is Product Completed");
if (dropdown1.value == "Yes" && date1.value == "")
{
alert("If the Is Product Completed option is set to Yes, then the Date Product Completed field must have a value.");
return false; // Cancel the item save process
}
return true; // OK to proceed with the save item
}
// getTagFromIdentifierAndTitle: Find a form field object using its tagName, identifier, and title to find it in the page
// Arguments:
// tagName: The type of input field (input, select, etc.)
// identifier: The identifier for the instance of the fieldName (ff1, ff2, etc.)
// title: The title of the list column
//
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
return tags[i];
}
}
return null;
}
</script>
<table cellpadding=0 cellspacing=0 id="onetIDListForm">
<tr>
<td>
So one of my users wanted to have an edit validation in a simple List where one field would be required if a second field had a value in it. Unfortunately, simple Lists don’t allow that cross field validation, and the users tend to mess around with this List a lot. I didn’t want to spend a lot of effort customizing it and getting saddled with the maintenance from here on out.
After a lot of searching and head-banging, I finally found where I could put code in the NewForm.aspx and EditForm.aspx pages to allow for JavaScript validation without changing the overall structure and design.
The green code is what I added to each of the pages. The PreSaveAction function in the SharePoint JavaScript libraries is one of those functions that doesn’t execute when the page is saved unless you add your own code. Therefore, it makes for a great hook to add your own JavaScript validation code. It’s added right after the PlaceHolderMain line, and consists of whatever you need the form to do. In this case, I used the getTagFromIdentifierAndTitle function that is pretty common when you search for this type of solution. That allowed me to get the value of the two fields I needed to examine. Once the values were obtained, I did a simple compare and returned false if the validation failed.
This URL explains the getTagFromIdentifierAndTitle function: http://blogs.msdn.com/b/sharepointdesigner/archive/2007/06/13/using-javascript-to-manipulate-a-list-form-field.aspx
This URL explains the PreSaveAction function: http://www.sharepointdevwiki.com/display/public/SharePoint+JavaScript+Functions+Overview
<%@ Page language="C#" MasterPageFile="~masterurl/default.master" Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage,Microsoft.SharePoint,Version=12.0.0.0,Culture=neutral,PublicKeyToken=71e9bce111e9429c" meta:progid="SharePoint.WebPartPage.Document" meta:webpartpageexpansion="full" %>
<%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitle" runat="server">
<SharePoint:ListFormPageTitle runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageTitleInTitleArea" runat="server">
<SharePoint:ListProperty Property="LinkTitle" runat="server" id="ID_LinkTitle"/>:
<SharePoint:ListItemProperty id="ID_ItemProperty" MaxLength=40 runat="server"/>
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderPageImage" runat="server">
<IMG SRC="/_layouts/images/blank.gif" width=1 height=1 alt="">
</asp:Content>
<asp:Content ContentPlaceHolderId="PlaceHolderLeftNavBar" runat="server"/>
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
<script language="javascript" type="text/javascript">
function PreSaveAction() {
var date1 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","Date Product Completed");
var dropdown1 = getTagFromIdentifierAndTitle("select","DropDownChoice","Is Product Completed");
if (dropdown1.value == "Yes" && date1.value == "")
{
alert("If the Is Product Completed option is set to Yes, then the Date Product Completed field must have a value.");
return false; // Cancel the item save process
}
return true; // OK to proceed with the save item
}
// getTagFromIdentifierAndTitle: Find a form field object using its tagName, identifier, and title to find it in the page
// Arguments:
// tagName: The type of input field (input, select, etc.)
// identifier: The identifier for the instance of the fieldName (ff1, ff2, etc.)
// title: The title of the list column
//
function getTagFromIdentifierAndTitle(tagName, identifier, title) {
var len = identifier.length;
var tags = document.getElementsByTagName(tagName);
for (var i=0; i < tags.length; i++) {
var tempString = tags[i].id;
if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
return tags[i];
}
}
return null;
}
</script>
<table cellpadding=0 cellspacing=0 id="onetIDListForm">
<tr>
<td>
