bomsn / mf-conditional-fields Goto Github PK

At the moment the only action supported are hide and show. A nice addition would be a disable action.

This can be useful to disable certain field until a correct value is entered. And also the most used use case is to disable the button, for example if the privacy policy is not accepted.

I have digged a bit trough the code, but seems not a simple implementations at the moment. It would require some code refactoring.

The field cannot work with a dependable field that depends on another fields.
Here is the used
[{
"field": "display",
"container": ".hsel_display",
"action": "show",
"rules": [{
"name": "choice",
"operator": "is",
"value": "lca_debug"
}, {
"name": "choice",
"operator": "is",
"value": "lca_awm_debug"
}],
"logic": "or"
}, {
"field": "script",
"container": ".hsel_script",
"action": "hide",
"rules": [{
"name": "logpath",
"operator": "isnotempty",
"value": ""
}, {
"name": "display",
"operator": "is",
"value": "0"
}, {
"name": "log",
"operator": "is",
"value": "0"
}],
"logic": "or"
}]

For quicker test Here's the HTML

1. This project is in desperate need of a Linter like ESLint. I tried reading the source code on GitHub I couldn't follow it. Spacing inconsistencies is making it hard to follow
2. I would prefer using the hidden boolean attribute instead of accessing the element style and setting it none.
3. Controlling the element visibility isn't enough, you have to disable the element using the disabled boolean attribute to avoid submitting its value. You can use that either on the form input or the fieldset.
4. Your library shouldn't be logging anything to the console. You can use that in debugging if you want but you should either remove it manually or by a script when you ship it. If you want to show an error or a warning using console.warn or throw an error.
5. Using IDs should be prohibited because if the user wants to use your library on more than one instance on the same page, he will have to create elements with the same ID. It's invalid.
6. It's advised to check for the global window object before adding stuff to it. In the case of SSR, the window object isn't available and it would break the build.
   Finally, try to publish it on NPM, it will be a great experience.

Hello,

I am using your code library, and it is amazing. Thanks for that. I am utilizing a country dropdown with the applied select2 functionality. However, if I use the select2 class in JS, the conditions rule is not executed. Can you please assist me with how I can use this? Below is the select2 example:

https://select2.org/dropdown

Thanks,

Hello,

The first time it works fine, but when the user adds something different that doesn't satisfy the condition in the main text field, and then adds the correct thing without reloading the page, the checkbox and radio button are hidden. For a better understanding, please take a look at the attached video.

Regards,