Tuesday 27 September 2011

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>

No comments:

Post a Comment