Focal Point
[SOLVED] JS on HTML editbox to validate date format YYYYMMDD

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/3297093196

July 02, 2019, 12:33 PM
Deej
[SOLVED] JS on HTML editbox to validate date format YYYYMMDD
I currently have validation on an edit box on my HTML page to validate that only 8 numbers can be input, which works exactly like I need it to. My working JS is:

//Begin function edit7_onchange
function edit7_onchange(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
var pattern = new RegExp(/^[0-9]{8}$/);
if (pattern.test(document.getElementById('edit7').value))
{
  return true;
}
  else
{
  alert("Please correct your input to the YYYYMMDD format");
  return false;
}


}
//End function edit7_onchange  


However, I need to have the edit box to validate with the YYYYMMDD format and I've been having problems with people entering the numbers in the incorrect format and I'm trying to figure out how to force them to enter it correctly.

I've found an old post from Tom Flynn that does what I need it to (except for the date format being different) PLUS adds the validation on the months and days, but making that code fit into the validation part of my edit7_onchange function has me completely stumped. Here is the code from Tom's post as a reference:

//--------------------------------------------------------------------------
//This function validates the date for MM/DD/YYYY format.
//--------------------------------------------------------------------------
function isValidDate(dateStr) {

 // Checks for the following valid date formats:
 // MM/DD/YYYY
 // Also separates date into month, day, and year variables
 var datePat = /^(\d{2,2})(\/)(\d{2,2})\2(\d{4}|\d{4})$/;
 
 var matchArray = dateStr.match(datePat); // is the format ok?
 if (matchArray == null) {
  alert("Date must be in MM/DD/YYYY format")
  return false;
 }
 
 month = matchArray[1]; // parse date into variables
 day = matchArray[3];
 year = matchArray[4];
 if (month < 1 || month > 12) { // check month range
  alert("Month must be between 1 and 12");
  return false;
 }
 if (day < 1 || day > 31) {
  alert("Day must be between 1 and 31");
  return false;
 }
 if ((month==4 || month==6 || month==9 || month==11) && day==31) {
  alert("Month "+month+" doesn't have 31 days!")
  return false;
 }
 if (month == 2) { // check for february 29th
  var isleap = (year % 4 == 0 && (year % 100 != 0 || year % 400 == 0));
  if (day>29 || (day==29 && !isleap)) {
   alert("February " + year + " doesn't have " + day + " days!");
   return false;
    }
 }
 return true;  // date is valid
}  

Any JavaScript folks out there give me a nudge in the right direction?

Thanks!

This message has been edited. Last edited by: Deej,



WebFOCUS 8.1.05
Windows, All Outputs
July 02, 2019, 01:11 PM
MartinY
Simple question : why you don't use the Calendar control instead of trying to perform all that manually ?


WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
July 02, 2019, 01:17 PM
Joel Elscott
I agree using the calendar control would be best if you can; otherwise this regular expression should work:

  
function validateDate() {

//--------------------------------------------------

// This function validates the date

// Valid format is YYYYMMDD

// RegExPattern includes Leap Year

//--------------------------------------------------

    var begDt = document.getElementById("calendar1");

    var RegExPattern = /^(((\d{4})(0[13578]|10|12)(0[1-9]|[12][0-9]|3[01]))|((\d{4})(0[469]|11)(0[1-9]|[12][0-9]|30))|((\d{4})(02)(0[1-9]|1[0-9]|2[0-8]))|([0-9][0-9][02468]40229)|([0-9][0-9][02468]80229)|([0-9][0-9][13579]20229)|([0-9][0-9][13579]60229)|([0-9][0-9][02468]00229))$/;

    if ((begDt.value.match(RegExPattern))) {

        document.getElementById("edit1").style.color = 'Green';

        document.getElementById("edit1").value = "Date is good!";

    }

    else {

        document.getElementById("edit1").style.color = 'Red';

        document.getElementById("edit1").value = "Date is bad!";

    }

}




WebFOCUS 8.2.03
z/OS
July 02, 2019, 03:31 PM
Deej
Thanks Martin & Joel,

I can't use the Calendar control because the HTML page is an "input" page that updates dates directly into my SQL table and it has to be in the YYYYMMDD format.

I've edited Joel's code a bit so that it works on my page, but it still allows me to leave the incorrect date format in there when I tab out of the edit box.

var begDt = document.getElementById('edit7');
var RegExPattern = /^(((\d{4})(0[13578]|10|12)(0[1-9]|[12][0-9]|3[01]))|((\d{4})(0[469]|11)(0[1-9]|[12][0-9]|30))|((\d{4})(02)(0[1-9]|1[0-9]|2[0-8]))|([0-9][0-9][02468]40229)|([0-9][0-9][02468]80229)|([0-9][0-9][13579]20229)|([0-9][0-9][13579]60229)|([0-9][0-9][02468]00229))$/;
 
if ((begDt.value.match(RegExPattern))) {
  return true;
}
  else
{
  alert("Please correct your input to the YYYYMMDD format");
  return false;
}  


So my full code for the 'edit7' box now looks like this:

//Begin function edit7_onchange
function edit7_onchange(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
//--------------------------------------------------
// This function validates the date
// Valid format is YYYYMMDD
// RegExPattern includes Leap Year
//--------------------------------------------------
 
var begDt = document.getElementById('edit7');
var RegExPattern = /^(((\d{4})(0[13578]|10|12)(0[1-9]|[12][0-9]|3[01]))|((\d{4})(0[469]|11)(0[1-9]|[12][0-9]|30))|((\d{4})(02)(0[1-9]|1[0-9]|2[0-8]))|([0-9][0-9][02468]40229)|([0-9][0-9][02468]80229)|([0-9][0-9][13579]20229)|([0-9][0-9][13579]60229)|([0-9][0-9][02468]00229))$/;
 
if ((begDt.value.match(RegExPattern))) {
  return true;
}
  else
{
  alert("Please correct your input to the YYYYMMDD format");
  return false;
}  


}
//End function edit7_onchange  


Is there a way I can force the correct format and prevent them from moving on until the format in that particular field is fixed?

This message has been edited. Last edited by: Deej,



WebFOCUS 8.1.05
Windows, All Outputs
July 02, 2019, 04:01 PM
Joel Elscott
Are you wanting to run the date check when the user clicks a submit button? Or are you wanting to force the user to not even be able to leave the edit box until the date is fixed?


WebFOCUS 8.2.03
z/OS
July 02, 2019, 04:03 PM
MartinY
quote:
I can't use the Calendar control because the HTML page is an "input" page that updates dates directly into my SQL table and it has to be in the YYYYMMDD format.

Calendar control gives you the ability to select the date format so, I don't really understand why you can't us it.
You can even force user to select from the control and not give them the ability to enter manually a date. That way the format is respected all the times.


WF versions : Prod 8.2.04M gen 33, Dev 8.2.04M gen 33, OS : Windows, DB : MSSQL, Outputs : HTML, Excel, PDF
In Focus since 2007
July 02, 2019, 04:15 PM
Deej
quote:
Originally posted by MartinY:
Calendar control gives you the ability to select the date format so, I don't really understand why you can't us it.

Well, I guess I'm not that familiar with the Calendar Control. Seems like I'll have to give myself a lesson.

Thanks



WebFOCUS 8.1.05
Windows, All Outputs
July 02, 2019, 04:26 PM
Hallway
You can just change the input type="date" and use the HTML5 date validation. Then it even gives you a calendar control like this
Of course, you must be using a modern browser for that to work (RIP Internet Exploder)

Naturally, IBI doesn't have that option available in the type dropdown selection, so you have to change it with JS in the window_onload function:
  
//Begin function window_onload
function window_onload() {
UpdateData();
// TODO: Add your event handler code here 
var edit1 = document.getElementById('edit1');
$(edit1).attr('type', 'date');
//add onInitialUpdate() function to make changes before initial run of the reports
}
//End function window_onload


Of course you could just use the calendar control. Just make sure that in the settings for the control, that you change the 'Date format in data source' setting to YYMD.



This returns the date in a yyyy/mm/dd format so if you need to remove the '/' characters, then you can then use the on change event to remove them:
  
//Begin function calendar1_onchange
function calendar1_onchange(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
var calVal = ctrl.value; 
ctrl.value = calVal.replace(/\//g, '');
console.log(ctrl.value);  
}
//End function calendar1_onchange

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs:
 
 
 
 
July 02, 2019, 05:57 PM
Deej
Hallway,

I was able to make your 2nd option using the calendar controls work. I also kept the validation from Joel's suggestion in place too in case someone tried to manually enter a date and entered it incorrectly.

Here is the final js for future reference:

//Begin function calendar1_onchange
function calendar1_onchange(event) {
var eventObject = event ? event : window.event;
var ctrl = eventObject.target ? eventObject.target : eventObject.srcElement;
// TODO: Add your event handler code here
var calVal = ctrl.value;
ctrl.value = calVal.replace(/\//g, '');
console.log(ctrl.value);
var begDt = document.getElementById('calendar1');
var RegExPattern = /^(((\d{4})(0[13578]|10|12)(0[1-9]|[12][0-9]|3[01]))|((\d{4})(0[469]|11)(0[1-9]|[12][0-9]|30))|((\d{4})(02)(0[1-9]|1[0-9]|2[0-8]))|([0-9][0-9][02468]40229)|([0-9][0-9][02468]80229)|([0-9][0-9][13579]20229)|([0-9][0-9][13579]60229)|([0-9][0-9][02468]00229))$/;


if ((begDt.value.match(RegExPattern))) {
  return true;
}
  else
{
  alert("Please use the calendar button to choose your date. The date you entered is not in the correct format (YYYYMMDD) OR it is not a valid date.");
  return false;
}
}
//End function calendar1_onchange  


Thank you all for the suggestions!



WebFOCUS 8.1.05
Windows, All Outputs
July 02, 2019, 06:08 PM
Hallway
Great to hear. You can also set the calendar to ReadOnly in the propeerties so that the end user cannot enter in data unless using the pop up calendar.

Don't forget to make the post as '[SOLVED]'

This message has been edited. Last edited by: Hallway,


Hallway

 
Prod: 8202M1
Test: 8202M4
Repository:
 
OS:
 
Outputs: