Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
JanMikes opened this issue Oct 4, 2016 · 5 comments

Comments

@JanMikes
Copy link

JanMikes commented Oct 4, 2016

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.

@JanMikes
Copy link
Author

JanMikes commented Oct 4, 2016

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.

@JanMikes
Copy link
Author

JanMikes commented Oct 4, 2016

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

@Robyer
Copy link
Contributor

Robyer commented Oct 4, 2016

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.

@JanMikes
Copy link
Author

JanMikes commented Oct 4, 2016

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 :-).

@JanMikes JanMikes changed the title <button> tags are validated as well, imho they should be skipped in live validation removeClass() on container should not be called if at least one control inside is invalid Oct 4, 2016
@Robyer
Copy link
Contributor

Robyer commented Oct 4, 2016

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...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Development

No branches or pull requests

2 participants