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

image.png.d93152be7cf3db7a026385dc22ec381a.png

2) Inside HTML blocks we need to add some warning message in case the condition is not met
image.png.27c8f06b13053f6b809d4a97a18b87d1.pngimage.png.148325b1c97c9d0a61dcbec312c59295.png

3) Create 2 Rules as on screenshots
image.png.f0fc908e7f2b436938bbeded746cc907.pngimage.png.681ae044ce2b1620e420e4a6e09bf4db.png

image.png

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

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

  • 4 months later...

Hi! - Just wanted to share this solution. If you want to save and restrict/disable Date. You may use an external JS library called flatpickr: https://flatpickr.js.org/getting-started/ 

To apply in the DataPage, follow these steps:

1. Insert Header and Footer. In the Footer, insert the code below. Make sure to disable first the HTML Editor in the Advanced Tab.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">

<!-- jQuery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
 <!--  Flatpickr  -->
  <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

<script>

$("#InsertRecordAppointment").flatpickr({
    dateFormat: "d/m/Y",
    altInput: true,
    altFormat: "m/d/Y",
    disable: [
        {
            from: "26-10-2022",
            to: "31-10-2022"
        }
    ]
});

</script>

Optional: You can insert this Style/CSS in the Header to change the font based on your DataPage's style.
 

<style>

.flatpickr-calendar {

 font-family: system-ui !important;

}

</style>

To know the formats, you can check them here: https://flatpickr.js.org/formatting/

enableTime - you are enabling time to the picker
dateFormat - format of the date that will be saved in the table. Caspio only accepts MM/DD/YYYY format in the table.
disable: range of date that you would like to disable - format will be based on the the dateFormat 

If you want to have a different display in the Text Field when selecting Date and Time, you can add altInput. altInput hides your original input and creates a new one.

Upon date selection, the original input will contain a m/d/Y H:i string, while the altInput will display the date in a more legible, customizable format.

Example:

$("#DATETIMEFIELD").flatpickr({
    enableTime: true,
    dateFormat: "m/d/Y H:i",
    altInput: true,
    altFormat: "F j, Y H:i"
});

IMPORTANT Note: Uncheck the Calendar pop-up in the field to apply the flatpickr.

image.png

Result:

image.png

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.

Guest
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.

Loading...
 Share

×
×
  • Create New...