I. Overview
1.1 Requirement
Data validation can be partly done in the built-in parameter query interface. For example, there are two parameters: the start date and the end date, and we have to validate that:
1. The start date and the end date must not be null and the end date must be after the start date
2. The end date must fall within a certain period of time after the start date, or an alert will pop up
To meet these requirements, we may add an event to the Query button. Specific settings are listed below.
The desired effect is shown in the figure below:
1.2 Solution
Get the value of the start date widget through this.options.form.getWidgetByName("starttime").getValue() and use JavaScript to validate the date.
II. Sample
2.1 Add date widgets to the parameter pane
Add two template parameters: starttime and endtime
Generate two date widgets in the parameter pane and bind them to the two parameters respectively (therefore, the two widgets are named starttime and endtime respectively)
2.1.1 Add an event to the Query button
Click the Query button and add a Click event on the right-hand pane:
Input the following JS codes:
//Read the start date
var start = this.options.form.getWidgetByName("starttime").getValue();
//Read the end date
var end = this.options.form.getWidgetByName("endtime").getValue();
if(start == "" || start == null){
//Judge if the start date is null
alert("Error, start time cannot be empty");
//An alert pops up if the start date is null
return false;
};
if(end == "" || end == null){
//Judge if the end date is null
alert("Error, end time cannot be empty");
//An alert pops up if the end date is null
return false;
};
if(start > end){
//Judge if the start date is greater than the end date
alert("Error, start time cannot be greater than end time");
//An alert pops up if the start date is greater than the end date
return false;
}
var startdate = new Date(start); //Change the format of the start date to Date
var enddate = new Date(end); //Change the format of the end date to Date
var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //Convert the number of milliseconds as the difference between the two dates into the number of days
if(subdate > 15){
//Judge if the end date is more than 15 days after the start date
alert("Error, end date must be within 15 days from start date");
//An alert pops up if the end date is more than 15 days after the start date
return false;
}
Note
Timely validation can be set in parameter widgets, but such validation will not be executed unless the corresponding widgets are clicked, so direct validation involving two widgets has to be enabled by JS.
The above-mentioned JavaScript code runs normally in explorers such as Firefox and Google’s IE9, but the alert in the judgment of the difference between the two dates does not work in IE8 and earlier. The following code works:
var start = this.options.form.getWidgetByName("starttime").getValue();
var end = this.options.form.getWidgetByName("endtime").getValue();
if( start == "" || start == null){
//Judge if the start date is null
alert("Error, start time cannot be empty");
//An alert pops up if the start date is null
return false;
};
if(end == "" || end == null){
//Judge if the end date is null
alert("Error, end time cannot be empty");
// An alert pops up if the end date is null
return false;
};
if( start > end){
//Judge if the start date is greater than the end date
alert("Error, start time cannot be greater than end time");
//An alert pops up if the start date is greater than the end date
return false;
}
var aDate = start.split("-")
var startdate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
//Change the format of the dates into MM-dd-yyyyalert(startdate);
var aDate = end.split("-")
var enddate = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
alert(enddate);
var subdate= ((enddate - startdate) / (1000 * 60 * 60 * 24))
//Convert the number of milliseconds as the difference between the two dates into the number of days
alert(subdate);
if(subdate > 15){
//Judge if the end date is more than 15 days after the start date
alert("Error, end date must be within 15 days of start date");
//An alert pops up if the end date is more than 15 days after the start date
return false;
}
2.1.2 View the effect
View the template through [Pagination Preview], select a start date and an end date which have a difference of more than 15 days, then the above-mentioned dialog box will pop up.
2.2 Widgets for cell data entry
If date widgets are used for cell data entry, add a date widget to a cell, set the name of the widget as starttime and change the format to Time:
This also applies to the end date widget, but change the name of the end date widget to endtime.
Modify this.options.form.getWidgetByName("starttime") in the code as contentPane.getWidgetByName("starttime"), as shown below:
Input the following JS codes:
var start = contentPane.getWidgetByName("starttime").getValue();
var end = contentPane.getWidgetByName("endtime").getValue();
if (start == "" || start == null) {
//Judge if the start date is null
alert("Error, start time cannot be empty");
//An alert pops up if the start date is null
return false;
};
if (end == "" || end == null) {
//Judge if the end date is null
alert("Error, end time cannot be empty");
// An alert pops up if the end date is null
return false;
};
if (start > end) {
//Judge if the start date is greater than the end date
alert("Error, start time cannot be greater than end time");
//An alert pops up if the start date is greater than the end date
return false;
}
var startdate = new Date(start); //Change the format of the start date to Date
var enddate = new Date(end); //Change the format of the end date to Date
var subdate = (enddate - startdate) / (1000 * 60 * 60 * 24); //Convert the number of milliseconds as the difference between the two dates into the number of days
if (subdate > 15) {
//Judge if the end date is more than 15 days after the start date
alert("Error, end date must be within 15 days from start date");
//An alert pops up if the end date is more than 15 days after the start date
return false;
}
View the effect:
III. Download the templates
3.1 Date widget validation for the parameter pane
Use JS to Validate the Values of Date Widgets_1.cpt
3.2 Date widget validation for cell data entry
Use JS to Validate the Values of Date Widgets_2.cpt
Previous：JS Reset the Widget Value
