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

Fix removing validation + Undebounce #110

Merged
merged 18 commits into from
May 6, 2024
Merged

Fix removing validation + Undebounce #110

merged 18 commits into from
May 6, 2024

Conversation

dahlbyk
Copy link
Collaborator

@dahlbyk dahlbyk commented Apr 26, 2024

More than I usually like to change at once, but all interrelated. In particular:

  • Fixes some bugs related to removing validation from a field/form
  • Removing validation from a field/form now also unwires event handlers
  • Validation is now only debounced on input/change; manual validation calls start (and resolve, if none are async) immediately
  • validateForm() and validateField() have been changed from returning void to returning Promise<boolean>, resolving with the same value their callback would receive.

@haacked
Copy link
Owner

haacked commented May 2, 2024

I've started reviewing this.

Copy link
Owner

@haacked haacked left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Found a bug during my testing. It's in the review.

src/index.ts Outdated Show resolved Hide resolved
src/index.ts Outdated Show resolved Hide resolved
src/index.ts Outdated
@@ -1011,12 +1023,20 @@ export class ValidationService {

private untrackFormInput(form: HTMLFormElement, inputUID: string) {
let formUID = this.getElementUID(form);
if (!this.formInputs[formUID]) {
let formInputs = this.formInputs[formUID]
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this is a little confusing (as evidenced by the bug I point out later). As I understand it, this.formInputs is a way of looking up all form inputs for a form. And formInputs is all the inputs for the current form. So we may want to rename this local variable something like currentFormInputs.

And for extra credit, perhaps this.formInputs should be this.formsInputs or this.forms?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

For now I've applied consistency in usage/naming (formInputUIDs = this.formInputs[formUID]), which (combined with your "use the variable" suggestion) makes the bug more obvious.

A more precise rename (inputsByFormUID?) might be useful, but there are several similar lookup fields we'd want to update for consistency.

@dahlbyk
Copy link
Collaborator Author

dahlbyk commented May 6, 2024

I did push a fix for the bug Phil found, and rebuilt 0.10.0.

Copy link
Owner

@haacked haacked left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice work!

Might be nice to include an example of how to clear existing validation messages when you disable validation. But that can happen later.

@haacked haacked merged commit fd1e5a6 into main May 6, 2024
1 check passed
@haacked haacked deleted the gh100-fix-remove branch May 6, 2024 19:52
@lonix1
Copy link
Contributor

lonix1 commented May 7, 2024

WOW! Nice work!

@lonix1
Copy link
Contributor

lonix1 commented May 7, 2024

I'd like to write some docs for the "remove validation" feature. (I'm unfamiliar with the history of the "undebounce" feature, so I'll leave that for another day or another person.)

Comments:

  • I think the demo has the button text toggling the wrong way round. One must click the remove button repeatedly to show the expected text. Very minor point, not important, just something I found.

Questions, I want to know whether I understand the new behaviour:

  • To remove validation from a form, one uses v.remove(formElement)
  • One can readd validation to that form via v.scan(formElement)
  • Validation failure classes remain after removal, e.g. input-validation-error. This is by design as the form's original state could have been server-side errors. If the user wants different behaviour he can reset/remove them.
  • Is there a way to perform the "full reset" idea from this comment, or should one do that manually (possibly by clicking on the form's "reset" button, if it has one)?
  • I'm using document.querySelectorAll('form') or someButton.form to target the form; out of curiosity only (because the library has many cool undocumented features), is it possible to tell which forms the library is currently tracking? UPDATE: a reasonable way is let forms = [...new Set(Array.from(document.querySelectorAll('[data-val]')).map(x => x.form))]; forms.forEach(form => v.remove(form));

Anything else I need to know?

(Sorry for the long list of questions. The new bits are really useful, thanks!)

@haacked
Copy link
Owner

haacked commented May 8, 2024

@lonix1 Great questions! Would you mind opening a new issue with these questions? New questions on a closed PR are easy to overlook. 😄

@lonix1
Copy link
Contributor

lonix1 commented May 9, 2024

Sorry I thought opening a new issue would be spamming your repo. :) I've done so here: #114

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

Successfully merging this pull request may close these issues.

Initial isFieldValid returns true when field is empty and uses required validator. Disabling validation
3 participants