contributte / live-form-validation

:no_entry: Nice client-side live form validation for Nette Forms.

Home Page:https://contributte.org/packages/contributte/live-form-validation.html

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Required date picker

brabo-dan opened this issue · 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.

What do you suggest?

commented

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.