Validation on SharePoint Forms – Part Four

Trolling the MSDN SharePoint – Design and Customization forum is proving to be a great learning experience all around.  I see questions I can’t answer which cause me to research them, and hopefully, I’m providing some answers which help others.

One of the things I saw over the last few days was a link to a post which explained how to use the PreSaveAction() JavaScript function to validate form data before it is saved.  (Check out my recent previous posts about validation in SharePoint forms: Parts One, Two, and Three.  I’ve posted about many other bits and pieces of this over time as well.)  Greg Osimowicz explains this in a post entitled SharePoint Forms date validation using JavaScript with reference to Edin Kapić‘s post entitled Add JavaScript Date Validation into List Item forms.  Read through both posts if you want to see how this holds together.

The cool thing is that there is a JavaScript function called PreSaveAction() which is called by FORMS.JS if it is defined in the form (NewForm.aspx or EditForm.aspx).  I had always converted the default List Form Web Part (LFWP) on forms to a Data View Web Part (DVWP) in order to “hook in” my JavaScript into the submit button for validation but it turns out that you don’t necessarily need to do that if you use the PreSaveAction function instead.

So, for example, if you want to validate that a Start Date is before an End Date (as shown in the posts above), you’d add this JavaScript to your page:

<script language="javascript" type="text/javascript">
function PreSaveAction() {
    var date1 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","Start Time");
    var date2 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","End Time");
    var arrDate1 = date1.value.split("/");
    var useDate1 = new Date(arrDate1[2], arrDate1[0]-1, arrDate1[1]);
    var arrDate2 = date2.value.split("/");
    var useDate2 = new Date(arrDate2[2], arrDate2[0]-1, arrDate2[1]);
    if(useDate1 > useDate2)
    {
        alert("The End Date cannot happen earlier than the Start Date");
        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>