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,

Simple question : why you don't use the Calendar control instead of trying to perform all that manually ?

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!";

    }

}

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,

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?

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.

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

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,

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!

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,