Question

Display error message when a condition is true

Laserfiche Forms

Updated June 22, 2021

asked on June 18, 2021

Hi,

I have 2 date fields the start and end date, then I have a table with field training status.

I want to display an error message when, Start date is less or equal to today and End date is less or equal to today, and training status is not Completed, The results I get from my code are not what I am expecting .

Your help will be highly appreciated.

//Fast Track Statuses
$(document).ready(function() {
// The startDate and endDate selectors.
  var $startDate = $("#Field8");
  var $endDate = $("#Field9");
  
  $startDate.add($endDate).on("change",function(){
      //Create moment objects for the start, end, and current dates
      var startDate = moment($startDate.val());
      var endDate = moment($endDate.val());
      var currentDate = moment();

      if ($(startDate <= currentDate && endDate <= currentDate) && (('.TrainingStatus  input') != "Completed"))
      {
          alert('Warning! The training status does not match the dates.')
		 //$('.TrainingStatus input').val('çompleted')
      } 
	  else
	  {
		  alert('Correct Training dates')
	  }
    }
  );
});

0 0

Replies

replied on June 18, 2021

If the purpose of these error messages is because you don't want users to select today or previous dates, then from a usability perspective it's better to restrict input rather than use error messages. You can use the following JavaScript to do so:

$( document ).ready(function() {

// Tomorrow's date - it's currently the 18 June 2021 when writing this
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate()+1);

// Format the date as a YYYY-MM-DD string
var tomorrowsDateFormatted = tomorrow.getFullYear() + "-" + String(tomorrow.getMonth() + 1).padStart(2, '0') + "-"+String(tomorrow.getDate()).padStart(2, '0');

// Change the limits of the date fields
$("#Field8").prop("min", tomorrowsDateFormatted);
$("#Field9").prop("min", tomorrowsDateFormatted); 
});

Once this code is in place your date fields will appear like this:

0 0

replied on June 18, 2021

Hi Stephen,

Thank you for your response. That is not the purpose of my code, I don't want users to be restricted from picking any date they want, but I want to display a message if the dates the picked doesn't correspond to the status chosen. So it's not just a one if statement but I will have many that will be linked to many statuses that I have.

//Fast Track Statuses
$(document).ready(function() {
// The startDate and endDate selectors.
  var $startDate = $("#Field8");
  var $endDate = $("#Field9");
  
  $startDate.add($endDate).on("change",function(){
      //Create moment objects for the start, end, and current dates
      var startDate = moment($startDate.val());
      var endDate = moment($endDate.val());
      var currentDate = moment();

      if (startDate <= currentDate && endDate <= currentDate) && 
         (('.TrainingStatus  input').val() != "Completed")
      {
          alert('Warning! The training status does not match the dates.')
		 //$('.TrainingStatus input').val('çompleted')
      } 
	  else if (startDate <= currentDate && endDate >= currentDate)
	  {
        //$('.TrainingStatus input').val('Inprogress')
      }
	  else if (startDate >= currentDate && endDate <= currentDate)
	  {
        //$('.TrainingStatus input').val('Scheduled')
      }
	  else
	  {
		  alert('Correct Training dates')
	  }
    }
  );
});

0 0

replied on June 22, 2021

Hi Reneilwe,

I am not sure how exactly the code snippet is not working to your expectation. Could you try following lines?

      if (startDate <= currentDate && endDate <= currentDate && 
         $('.TrainingStatus  input').val() != "Completed")
      {
          alert('Warning! The training status does not match the dates.')
		 //$('.TrainingStatus input').val('çompleted')
      }

You may also add empty check for start date and end date to show the alert only when they are both filled.

0 0

replied on June 22, 2021

Hi Ziyan,

Thank you for your response, I tried even that. I am a beginner in Jquery, I do't know what I am doing wrong, but my code is not working as it should. I will keep on trying it, thank you for your help.

//Fast Track Statuses
$(document).ready(function(){
    $('.Choice input').change( function (){
        //The startDate and endDate selectors.
		var TodayDate = new Date();
		var StartingDate = new Date($('#field8').val());
		var endingDate   = new Date($('#field9').val());
        

    if(($('#q8 input, #q9').val()!='') && (StartingDate <= TodayDate && endingDate <= TodayDate) && ($(".TrainingStatus input").val() !== "Completed", "Resigned", "Absconded"))
    {
		  
          alert('The incorrect status has been selected for this dates selection')
          $('.Submit').hide();
          console.log('1');
        }
	    else if(($('#q8 input, #q9').val()!='') && ($(StartingDate <= TodayDate) && $(endingDate > TodayDate)) && ($(".TrainingStatus input").val() == "Inprogress","Resigned", "Absconded"))
        {
       
          //alert('The incorrect status has been selected for this dates selection')
          $('.Submit').hide();
           console.log('2');
        }
	    else if(($('#q8 input, #q9').val()!='') &&($(StartingDate > TodayDate) && $(endingDate > TodayDate)) && ($(".TrainingStatus input").val() == "Scheduled","Resigned", "Absconded"))
        {
        
          //alert('The incorrect status has been selected for this dates selection')
          $('.Submit').hide();
          console.log('3');
        }
	    else if (($('#q8 input, #q9').val()!='') && $(StartingDate > TodayDate)  && $(".TrainingStatus input").val() == "Approved")
        {
        
          //alert('The incorrect status has been selected for this dates selection')
          $('.Submit').hide();
          console.log('4');
        }
        else 
		{
			$('.Submit').show();
          console.log('5');
		}
    });
});

0 0

You are not allowed to follow up in this post.

Question

Question

Display error message when a condition is true

Replies

Sign in to reply to this post.