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.

Home Page:https://just-validate.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Skip validation rules for fields that are hidden with CSS

nikolenko-dmitriy opened this issue · comments

In fact, I'm trying to write universal code to initialize validation rules that will work for any form on the site.

But there is a big problem with dynamic fields, which must be checked as required but can be shown or hidden on the form depending on the value in another dropdown or radio field.

I am aware of the possibility of removing validation rules using removeField that was suggested here #30. But this is not the best solution if the site has 50 forms and many of them have dynamic fields. In this case, I will need to write many unique validators.

It would be much better if, during form validation, the library would skip validation rules for fields that have a :hidden state. In this case, there is no need to use the removeField method, since the field must still be validated based on the rules that were previously defined when it is displayed to the user.

This will also fix the trouble for multi-step form, when all fields from all steps are validated on form submit event. When the user sees fields from the first step only, we need to validate only visible fields clicking on Next step button.

So the basic idea of my universal code is this:

  • Find all forms on the page that should be validated
  • Loop found forms: find all the fields associated with the form, define rules for them and add a validator for the form based on the found fields and their rules. It doesn't matter whether the field is currently visible to the user or not. The same goes for required groups of checkboxes or radio buttons.
  • When submitting the form, the validator checks all fields and groups, but for hidden elements the result of the check will always be valid.

What do you think of my suggestion to skip validation rules when a field or group has a :hidden state? This will be very helpful for dynamic fields or fields in multi-step form.

+1 for this

@nikolenko-dmitriy
This feature will be very helpful to many!

I've just started using this plugin, and I have many conditional fields that only become visible when certain radios, checkboxes, etc. are selected. It's a very tedious process to individually skip validation for these hidden fields, as there are many scenarios where elements become visible or hidden. removeField and removeGroup works fine for simple forms.

All the best!