horprogs / Just-validate

Modern, simple, lightweight (~5kb gzip) form validation library written in Typescript, with no dependencies (no JQuery!). Support a wide range of predefined rules, async, files, dates validation, custom error messages and styles, localization. Support writing custom rules and plugins.
https://just-validate.dev/
Other
511 stars 92 forks source link

Doesn't seem to work with "hidden" input fields in bootstrap tabs #88

Closed kpatron closed 1 year ago

kpatron commented 1 year ago

Is your feature request related to a problem? Please describe. I started using the library just recently and I believe it's a beautiful work and looking forward to use it in more of my projects. Sadly today I found out that I cannot seem to use it to validate input fields that are not visible in the DOM. I'm using Bootstrap tabs (https://getbootstrap.com/docs/5.2/components/navs-tabs/#tabs) to disect a big form (more than 50 inputs) in different categories/tabs (sort of like a wizard) and I wrap them all in one form tag, JQuery seems to don't have a issue and will grab all of the fields under the form tag but JustValidate would only take the first set that are visible when the HTML displays. I dunno, maybe I'm doing something wrong?

Describe the solution you'd like I just want to be able to validate all of the inputs of a form that is disected in tabs (sort of like a wizard)

Describe alternatives you've considered I have tried using the shown method from javascript to see and add the rules again but still it seems unable to find all of the inputs

Additional context image

horprogs commented 1 year ago

Hi! This error happens only if there is no such element in the DOM when you are calling addField() method. I'd suggest to add field only when it exists in the DOM, e.g. when you switching between tabs you show the needed fields and call addField() method for them.

Anyways if you could provide any example of your code (using this template https://codesandbox.io/s/just-validate-template-jrv65?file=/index.html) would be very helpful to figure out what went wrong