search

terminal42 / contao-conditionalselectmenu

A Contao select menu widget which display options conditionally depending on another (conditional) select menu.
MIT License
6 stars 5 forks source link

Required fields + empty option triggers browser validation (error) #8

Closed m-vo closed 5 years ago

m-vo commented 6 years ago

screenshot_20180417_151750

With required fields + active HTML5 browser validation, empty fields (nothing selected in the primary dropdown) will get marked as failing on page load.

I'm not sure if the browser validation can be reset (found nothing obvious on that), so the required attribute should probably be removed in this case or made sure the form does not get altered when initially rendering.

aschempp commented 6 years ago

The browser validation can be disabled in the Contao form configuration.

m-vo commented 6 years ago

Sure, but only for the whole form and not for a single field.

Of course it's possible to add a custom template or custom js that works around this, but I think it's a valid use case that should work out of the box, wdyt?

aschempp commented 6 years ago

Correct, that's default HTML5 behavior.

m-vo commented 6 years ago

But I can render fields that initially aren't valid - a required but empty textfield for instance - and the browser won't complain until I'm hitting submit.

m-vo commented 6 years ago

Just noticed: This problem does not exist when using chrome.

richardhj commented 5 years ago

It does not work to remove the required attribute before the select was updated and to add the required attribute after the select options were updated. The select will show as failing nonetheless.

The key is to reset the form, so that the input state (whether the select was touched) will be truncated.

aschempp commented 5 years ago

Doesn't that reset all input in the form? Thats at least how a type="reset" input button works…?

richardhj commented 5 years ago

That's true but it only happens on page load and, in addition, the current values are kept as of 1d60273b66f6319aeb77314eff06af9f593a2895.

However, I am uncertain, whether we can experience data loss nonetheless. Then, we have to decide, whether there is a practical solution to this issue.

richardhj commented 5 years ago

To tackle this issue, there is no gold solution available, however, one could remove the required attribute on the dependent select via JS. @aschempp and I agreed upon the fact, that it would have further drawbacks when removing the required attribute. We, therefore, are not able to fix this issue.