contributte / live-form-validation

:no_entry: Nice client-side live form validation for Nette Forms.
https://contributte.org/packages/contributte/live-form-validation.html
BSD 3-Clause "New" or "Revised" License
59 stars 24 forks source link

Required date picker #44

Open brabo-dan opened 6 years ago

brabo-dan commented 6 years ago

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.

f3l1x commented 6 years ago

What do you suggest?

Kazzaky commented 3 years ago

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.