I have used the formvalidation.io plugin in my Vue 2 app with Option API but then I updated the Vue version to 3 and started to use the Composition API it is not working anymore.
Here is how I am importing formvalidation.io plugin.
import formValidation from '@/assets/plugins/formvalidation/dist/es6/core/Core';
// FormValidation plugins
import Icon from '@/assets/plugins/formvalidation/dist/es6/plugins/Icon';
import Trigger from '@/assets/plugins/formvalidation/dist/es6/plugins/Trigger';
import Bootstrap from '@/assets/plugins/formvalidation/dist/es6/plugins/Bootstrap';
import SubmitButton from '@/assets/plugins/formvalidation/dist/es6/plugins/SubmitButton';
Then in my setup()
function, I'm creating a validation instance.
const validation = formValidation(
_signupForm,
{
fields: {
...
},
plugins: {
trigger: new Trigger(),
bootstrap: new Bootstrap(),
icon: new Icon({
valid: 'fa fa-check',
invalid: 'fa fa-times',
validating: 'fa fa-refresh'
}),
submitButton: new SubmitButton(),
}
}
);
I am using it the same way as it is shown in the official doc: https://formvalidation.io/guide/examples/integrating-with-vue
When I open the app I am getting this error in browser console.
classSet.js?c52a:1 Uncaught (in promise) TypeError: Cannot read property 'classList' of null
at eval (classSet.js?c52a:1)
at Array.forEach (<anonymous>)
at s (classSet.js?c52a:1)
at eval (classSet.js?c52a:1)
at Array.forEach (<anonymous>)
at c (classSet.js?c52a:1)
at s.install (Framework.js?e18a:1)
at l.registerPlugin (Core.js?b275:1)
at eval (Core.js?b275:1)
at Array.forEach (<anonymous>)
I guess that the formValidation.io doesn't support the vue3 but I didn't find any info about it.
Can you help?
Read more here: https://stackoverflow.com/questions/65716101/why-formvalidation-io-plugin-doesnt-work-with-vue-3
Content Attribution
This content was originally published by laurisstepanovs at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.