How to add JS validation on SharePoint new item form to check date field populated or not

Question

I am working with a Task list in SharePoint online. On the new item form, I have a field called 'Due Date' (Internal name: DueDate) which is set to optional and for one of the Flow requirements, I have to keep it optional as upon making it required my existing flow logic will break.

So i am looking to see if validation can be added using JS. Basically when a user clicks on Save button on the new item form, the code should check if Due date field is populated or not, if not then it should show a message in red that you cannot leave due date empty. Once they populate, it should let them save.

Can anyone help me with the JS code. P.S: Again I do not want to leverage OOTB required approach here, need a JS solution please.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PreSaveAction(){
    var dueDate=$("input[title='Due Date']").val();
    var entity = $("select[title='Entity ID Name']").val();


    if(dueDate.trim()==""){
        alert("Please select a Due Date.");
        return false;
    }
    if(entity.trim()==""){
    alert("Please populate Entity ID Name.");
    return false;
    }


    var getIDPeoplePicker=$("div[title='Assigned To']").attr("id");
    var ppobject = SPClientPeoplePicker.SPClientPeoplePickerDict[getIDPeoplePicker];
    var usersobject = ppobject.GetAllUserInfo();
    if(usersobject.length==0){
        alert("Please select a user in Assigned To field.");
        return false;
    }
    return true;
}
</script>

Thanks in advance.

Answer 1

We can add the code below into a script editor web part in task list form page to achieve it.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
function PreSaveAction(){
    var dueDate=$("input[title='Due Date']").val();
    if(dueDate.trim()==""){
        alert("Please select a Due Date.");
        return false;
    }
    if(!$("div[title='Assigned To']").find(".sp-peoplepicker-initialHelpText").is(":hidden")){
        alert("Please select a user in Assigned To field.");
        return false;
    }
    return true;
}
</script>

Answer 2

you can achieve the validation for People Picker field through the following code

 <script type="text/javascript">
   function PreSaveAction()
   {
     //assign value of people picker field to variable
     var AssignedTo = "Assigned To";
      Assigned = SPClientPeoplePicker.SPClientPeoplePickerDict[$('[title="' + AssignedTo + '"]')[0].id];

  //check if the variable contains values
   if (Assigned.TotalUserCount == 0) {
    alert("Please, Enter at least one User in Assigned To.");
    return false;
      }
        return true;
      }
   </script>