live-form-validation icon indicating copy to clipboard operation
live-form-validation copied to clipboard

Required date picker

Open brabo-dan opened this issue 8 years ago • 2 comments

If I use any common JS date pickers, as Bootstrap datepicker lib, or jQuery UI date picker. And I have required date filed. Then validation error occures in a moment, I select date from the datepicker.

Resulting situation is, I have error state field, but value is set.

obrazek

Form can be posted, so it is not blocking. But it looks bad. And end users are still reporting it as an error.

brabo-dan avatar Jan 29 '18 08:01 brabo-dan

What do you suggest?

f3l1x avatar May 14 '18 10:05 f3l1x

It's because the datepickers use non-native event change triggerer, so 'change' event will never happend (on the live form validation handler side), only 'blur' which actually adds the error, with the old 'Nette.addEvent' it worked well, but with nowadays 'addEventListener' it doesnt, there are two ways to solve this issue, first is to trigger the native event manually via custom callback like this:

el.datepicker({
    onSelect: function() {
        this.dispatchEvent(new Event('change'));
    }
});

or second way (imo better) is to edit the LiveForm.setupHandlers as the function comment suggest and use jquery event handlers instead native addEventListener.

Kazzaky avatar Jun 21 '21 16:06 Kazzaky