Jump to content

Date validation on Submission Form

Recommended Posts

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:
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) {
warn1.style.display = 'block'
} else {
warn1.style.display = 'none'
if (endDate <= startDate) {
warn2.style.display = 'block'
} else {
warn2.style.display = 'none'

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

Link to comment
Share on other sites

  • 4 months later...
  • 1 month later...

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Create New...