Add JavaScript Date Validation into List Item forms (in NewForm.aspx)

Add JavaScript Date Validation into List Item forms (in NewForm.aspx)

I want to validate two fields on a new list item form by invoking JavaScript custom function. They are two date fields and I want to ensure that the end date can't happen before the start date. My first idea was to attach a validation function on the onclick event of the Submit button.

I started by inspecting the generated HTML of the form. The Submit button already has a onclick() code which is:

if (!PreSaveItem()) return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$m$g_b8be167a_5691_41d0_975c_b269cd345fc6$ctl00$toolBarTbltop$RightRptControls$ctl01$ctl00$diidIOSaveItem", "", true, "", "", false, true

Searching in the SharePoint JavaScript files in the LAYOUT folder, I found the definition of PreSaveItem function in FORMS.JS file. It simply invokes PreSaveAction function, if defined.

Finally, it was just a matter of inserting a custom function named PreSaveAction in a <SCRIPT> block of the NewForm.aspx (and EditForm.aspx). I also used the date parse code from this forum.

The code I put in NewItem.aspx is like this,

Note: Write your function just below the PlaceHolderMain line:

<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">

For validating two dates from two calendar controls:

function PreSaveAction()

{

    var date1 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","Contract Date"); 

    var date2 = getTagFromIdentifierAndTitle("INPUT","DateTimeFieldDate","Contract End Date");

    var arrDate1 = date1.value.split("/");

    var useDate1 = new Date(arrDate1[2], arrDate1[1]-1, arrDate1[0]);

    var arrDate2 = date2.value.split("/");

    var useDate2 = new Date(arrDate2[2], arrDate2[1]-1, arrDate2[0]);

    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

}

If you want to validate the date with current calendar date and check the validation on button click, then the function is as below:

function PreSaveAction()

{

    var DateBox = document.getElementById('ctl00_m_g_b8be167a_5691_41d0_975c_b269cd345fc6_ctl00_ctl04_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate');

    if (DateBox != null)  {

             var value1 = DateBox.value;

               if(value1 != null && value1 != '' ){

                var currentTime = new Date();

         var month = currentTime.getMonth() + 1;

       var day = currentTime.getDate();

       var year = currentTime.getFullYear();

      var currentdate = month + "/" + day + "/" + year;

      if(value1 <= currentdate){

      return true;

      }

      else

      {

      alert("Selected Date should be less than or equal to today");

      return false;

      }

      }

      else

      {

      alert("Selected Date should be less than or equal to today");

      return false;

      }

      }

}

You can also use this code:

<script language="javascript" type="text/javascript">

function PreSaveAction()

{

var DateBox = document.getElementById('ctl00_m_g_b8be167a_5691_41d0_975c_b269cd345fc6_ctl00_ctl04_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_DateTimeField_DateTimeFieldDate');

if (DateBox != null) {

var value1 = DateBox.value;

var arrDate1=value1.split("/");

var newmonth= arrDate1[0];

var ctrlDay = arrDate1[1];

var ctrlYear = arrDate1[2];

if(value1 != null && value1 != '' ){

var currentTime = new Date();

var month = currentTime.getMonth() + 1;

var day = currentTime.getDate();

var year = currentTime.getFullYear();

var currentdate = month + "/" + day + "/" + year;

if((newmonth <= month) && (ctrlDay <= day) && (ctrlYear <= year)){

return true;

}

else

{

alert("Please select TimesheetDate upto Today!");

return false;

}

}

else

{alert("Please select TimesheetDate upto Today!");

return false;

}

}

}

</script>