removeClass() on container should not be called if at least one control inside is invalid

[Jan Mikeš]

It causes issues, when i have input that is beign validated and is invalid with same container as tag -> button tag is marked as valid, input is invalid -> "hasError" class is beign removed on container, which is side effect.

[Jan Mikeš]

I have recorded screen with this error, you can find it here: https://youtu.be/9Bhj12MoUYQ
Notice that if only input is validated, container has "has-error" class, but after validating whole form, class on container disapears, because it validates button as well (in same container) and mark it as valid so removeError is called on it.

[Jan Mikeš]

I have 2 workarounds:

1. wrap <button> tag with <span> that has container class
2. remove , button: 1 from https://github.com/Robyer/nette-live-form-validation/blob/master/live-form-validation.js#L618

[Robert Pösel]

Is behavior of <button type="submit"> different from <input type="submit"> regarding this problem? If it behaves the same, then workaround (2) imho wouldn't help.

[Jan Mikeš]

Behaviour is same, i use it because of being able to use <i class="fa fa-..."> inside of tag itself. I tried both solutions and either are working.

I just realised i did not try replacing <button> with <input type="submit"> in that form, there might be exactly the same problem, but that could be solved easily by adding elem.type === 'submit' check (it would solve even the <button> situation).

I was just curious, why does <button> need a validation :-).

[Robert Pösel]

Maybe <button> validation is somehow related to this feature?
https://doc.nette.org/en/2.4/forms#toc-disabling-validation

Anyway, I'm not sure what proper solution would look like, as I think you will have same problem when you would use more inputs in same container. So one input will remove the error because it doesn't know that some other input shares the same container...