Hello,
I have a form that populates a date/time field from a lookup rule. There is another date/time field on the form that I want to be able to say must be greater than (later) than the date/time field filled from the lookup rule. Ideally, a message would be displayed stating that the date/time must be after the other one, and also prevent submission of the form. Is something like this possible? I'm on version 11.
Thanks!
Question
Question
Forms - Date/Time - Prevent submission if one date/time field is less than another date/time field
Answer
See below for an example:
Create a field rule where it validates the value of the ending date/time, checking that it is on or after the value set in the starting date/time field.
Replies
This is a pretty common request. I'd love if you could just set another variable/field as the source for range limits out of the box, but until then...
Here's a script I reuse quite a lot in different variations.
Put the class startDate on your lookup and endDate on the other field and this will dynamically set the min range on the end date field so it will leverage the built-in validation, show errors, block dates on the calendar menu, prevent submission, etc.
$('.startDate input').on('change', function(){ // uses start date value or blank if start date is not set // adjust the MM/DD/YYYY portion if you're using different formatting in your field // the YYYY-MM-DD needs to stay the same because that's how the min/max are set var minDate = $(this).val() != '' ? moment($(this).val(),'MM/DD/YYYY').format('YYYY-MM-DD') : ''; // set min date var endDate = $('.endDate input'); endDate.attr('min', minDate); // revalidate if field has value (optional) if(endDate.val() != '') { endDate.parsley().validate(); } });
If you need this to be set on subsequent forms where the lookup isn't running again, you could either manually trigger the change event right after you assign the event handler, or you could split the inner code out to a separate reusable function.
Then, you could also use the "Value not in range" option in the custom error messages tab to set a custom message for your end date field.
Hi Jason,
I was able to get this to work if the field is just asking for a date, but I can't seem to get it to work when the time is part of the field as well. Here's an example of two of my fields:
So in this case, the Load Time would be the first date/time captured, and the Unload Time would be the last date/time captured. So Unload Time needs to be after Load Time. Are you able to get it to work when the time is also involved?
I don't think the same approach is going to work with a date/time field, and I don't have anything ready-to-go for that specifically.
The approach I presented uses the min attribute of the fields, which works fine when it is just date or time; however, with date/time combined you're no longer comparing fields 1-to-1.
For example, if you set a start time of 4PM, the min attribute is not date specific so 2PM would be "invalid" even if the date portion was for a later date.
To do what you want using only the min attribute, you'd need to do someting like the following:
- Narrow the selector so you can have separate handlers and code for date vs time (for example '.startDate .cf-field-date input' and '.startDate .cf-field-time input')
- Leave the date portion as-is
- Add an event handler for start time and end date. Set it up so that the start time value is applied as the minimum only if End Date is the same as Start Date
This will be supported with field rule in new form designer in the coming self-hosted Forms release which is targeted at end of this year.
I see the ability to set a minimum and maximum now in the modern forms designer. I don't see a way to select a variable - how would I do this?
See below for an example:
Create a field rule where it validates the value of the ending date/time, checking that it is on or after the value set in the starting date/time field.
Perfect. Thanks!