On field exit validation needed for Date inputs

We need to compare a start and end date to check the end is not before the start, but only when both date fields have been entered.

We also need to check for a minimum age with respect to a reference date. (start of the academic year)

How can we do this?

Are there date comparison functions in any of the BF JS libraries?

Can we access functions with the event trigger being when an input loses focus?

It is not useful to have the fields/inputs validated after each character of the date is entered.

Thanks

If you use an html input element, then you can have an on Blur event that would trigger when the user left.

Another technique I sometimes use is to have an empty HTML field with a custom validator, then I can add additional logic as needed.

You could add onChanged_actions to the two fields, then when either is modified you can check to see if both are populated. If so, then you can do the various checks which you need. Ensure that both have ‘not empty’ validation so that the form can’t be submitted without them both having been populated / changed.

I’d suggest using moment.js (https://momentjs.com/) which is available ‘by default’ in BF for dealing with dates, it provides all sorts of manipulations and comparisons. Then I’d be inclined to use a toastr message to say ‘Hey you can’t finish before you start’, or 'Are you sure you got your date of birth right ‘cause it doesn’t look like you’re old enough for this’.

2 Likes

Did not know moment.js was available by default by BF. Huge help to some projects i’m working on actually!

Yip

  • moment
  • numeral
  • lodash

See https://docs.fmbetterforms.com/usage/formsoverview/working-with-html#other-javascript-libraries

2 Likes