Date validation on Submission Form

[Alexray]

Hello Caspio Family,

Unfortunately, Caspio doesn't have a feature that would allow validating the date before the Submission Form. The only way I found using Caspio standard features is to show a warning message when the date doesn't fit the condition (e.g. when the date should not be prior to today). You can do that with the help of rules. I will show you an example with two dates 'Start Date' and 'End Date' with conditions: the Start Date shouldn't be prior to today and the End Date should not equal or be before the Start Date. 

1) Add 2 HTML blocks beneath each Date field and add a section to each HTML block

2) Inside HTML blocks we need to add some warning message in case the condition is not met

3) Create 2 Rules as on screenshots

That solution will show our warning messages, but won't prevent form submission if a user disregards the warning.
 

But if it is necessary to let users submit only correct dates, you can use the second solution with JavaScript:

1. Insert Header&Footer, HTML block 1, HTML block 2, and place them below our Date fields. No need to add extra sections.

2. In the Header enable 'Source' and paste the code:
<script>
document.addEventListener("BeforeFormSubmit", function (event) {
startDate = document.querySelector("#InsertRecordDateStart").value;
endDate = document.querySelector("#InsertRecordDateEnd").value;
warn1 = document.querySelector("#warning1");
warn2 = document.querySelector("#warning2");

var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = mm + '/' + dd + '/' + yyyy;
if (startDate < today) {
event.preventDefault();
warn1.style.display = 'block'
} else {
warn1.style.display = 'none'
}
if (endDate <= startDate) {
event.preventDefault();
warn2.style.display = 'block'
} else {
warn2.style.display = 'none'
}
});
</script>

3. In the HTML block 1 enable 'Source' and paste:
<span id="warning1" style="color:#FF0000;display:none;">Start date cannot be in the past or empty</span>

4. In the HTML block 2 enable 'Source' and paste:
<span id="warning2" style="color:#FF0000;display:none;">End date cannot be prior or same as Start date or empty</span>

5. Make sure your datafield 1 and datafield 2 are called 'DateStart' and 'DateEnd' respectively or in the JavaScript added to the Header you need to replace in the lines
startDate = document.querySelector("#InsertRecordDateStart").value;
endDate = document.querySelector("#InsertRecordDateEnd").value;
to the name of the fields you have.

 

You can test to see how it works on my DataPages:

1st solution with Rules

2nd solution with JS

[ChristianM]

Excellent solution using Rules. It was very easy to implement. Thanks!

[Alexray]

In addition to the JS solution.

In case you have a date format with name of month or day of the week, you may also need variables for them:
const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];
const month = ["January","February","March","April","May","June","July","August","September","October","November","December"];
let today = new Date();
let nameOfDay = weekday[today.getDay()];
let nameOfMonth = month[today.getMonth()];
let dd = String(today.getDate()).padStart(2, '0');
let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
let yyyy = today.getFullYear();

 

For example, if your format looks like 2022-Jun-17-Fri, then you get the same format this way:
today = `${yyyy}-${nameOfMonth.slice(0, 3)}-${dd}-${nameOfDay.slice(0, 3)}`;

Hope it helps someone.
Let me know if there are any questions.