How to Add Additional Plugins?
https://devs.keenthemes.com/question/how-to-use-additional-plugins-in-formvalidation
Hi, i used the template in CodeIgniter 4 (PHP), how can I add the AutoFocus plugin for FormValidation?
Already tried: https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp
and your reply above is already inside gulp.config.js
thank you!
Replies (19)
Hi,
To add form validation autofocus plugin just add it in gulp.config.js:
formvalidation: {
styles: [
"{$config.path.common_src}/plugins/formvalidation/dist/css/formValidation.css",
],
scripts: [
"{$config.path.node_modules}/es6-shim/es6-shim.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Bootstrap5.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/AutoFocus.min.js"
],
},Then recompile your assets folder with Gulp or Webpack.
Please note that the build tools are required only in the development environment just to compile the assets when the source folder files are modified. In the hosting/server deployment, you will only need the compile assets, no need to install the build tools dependencies there.
Regards.
Hi, just had time to test this, I have recompiled my assets folder by including the AutoFocus plugin, but unfortunately I now get this error:
Uncaught (in promise) ReferenceError: FormValidation is not defined
before recompiling the error was:
Uncaught (in promise) TypeError: FormValidation.plugins.AutoFocus is not a constructor
I am using metronic 8.1.8 - demo 1
Hi, just had time to test this, I have recompiled my assets folder (https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp) by including the AutoFocus plugin
formvalidation: {
styles: [
"{$config.path.common_src}/plugins/formvalidation/dist/css/formValidation.css",
],
scripts: [
"{$config.path.node_modules}/es6-shim/es6-shim.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/AutoFocus.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Select2Class.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Bootstrap5.min.js",
],
},but unfortunately, I now get this error:
Uncaught (in promise) ReferenceError: FormValidation is not defined
before recompiling the error was:
Uncaught (in promise) TypeError: FormValidation.plugins.AutoFocus is not a constructor
I am using metronic 8.1.8 - demo 1
Hi,
Can you please try to include the plugins assets after the core full.min.js in the gulp config ?
Regards.
same error:
Uncaught (in promise) ReferenceError: FormValidation is not defined
here's the gulp config
formvalidation: {
styles: [
"{$config.path.common_src}/plugins/formvalidation/dist/css/formValidation.css",
],
scripts: [
"{$config.path.node_modules}/es6-shim/es6-shim.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Bootstrap5.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/AutoFocus.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Select2Class.min.js",
],
},after editing gulp config, I first delete the demo1 folder so that it will generate the assets folder, then I open terminal in tools folder, run yarn, lastly gulp --demo1
Any update on this?
I am trying to update to 8.2.0 but the contents of gulp.config.js is different:
formvalidation: {
styles: [
"{$config.path.common_src}/plugins/@form-validation/umd/styles/index.css",
],
scripts: [
"{$config.path.node_modules}/es6-shim/es6-shim.js",
"{$config.path.common_src}/plugins/@form-validation/umd/bundle/popular.min.js",
"{$config.path.common_src}/plugins/@form-validation/umd/bundle/full.min.js",
"{$config.path.common_src}/plugins/@form-validation/umd/plugin-bootstrap5/index.min.js"
],
},can you send the link of the different plugins that I can add in gulp.config.js
btw, I also tried to remove this:
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Select2Class.min.js",but the error is still the same
Hi,
It seems you're encountering issues with including the FormValidation Autofocus plugin in your Metronic project. Here's a brief explanation of what's happening and a potential solution:
The order in which you include JavaScript scripts can be crucial. Since you're using plugins that depend on the core FormValidation library, make sure you include the core library script before any of its plugins.
In your gulp.config.js file, make sure you have included the FormValidation.full.min.js script before any of its plugins. Your configuration should look something like this:
formvalidation: {
styles: [
// ... other styles
"{$config.path.common_src}/plugins/formvalidation/dist/css/formValidation.css",
],
scripts: [
"{$config.path.node_modules}/es6-shim/es6-shim.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/FormValidation.full.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/Bootstrap5.min.js",
"{$config.path.common_src}/plugins/formvalidation/dist/js/plugins/AutoFocus.min.js",
// ... other scripts
],
},If you're updating to Metronic 8.2.0, you've mentioned that the structure of gulp.config.js has changed. You should adapt your gulp configuration accordingly, ensuring the correct order of script inclusion.
Sometimes, issues can occur due to cached files. After making changes to your configuration, you might want to clear your browser cache and even run `yarn` or `npm` install again to ensure everything is up-to-date.
That's exactly the content of my gulp.config.js.
I followed again all the steps from this site: <a>https://preview.keenthemes.com/html/metronic/docs/getting-started/build/gulp</a>
Same error: Uncaught (in promise) ReferenceError: FormValidation is not defined
I even downloaded again the theme from themeforest. Same Error
Hello? Can this even be fixed? Maybe the solution is to manually add the Plugins since adding thru gulp.config.js doesn't seem to work
Hi Peng Serrano,
Before trying to manually add plugins, have you attempted to build a new project directly from version 8.2.0 of the theme? It's possible that the issue might be arising from an update-related conflict.
Thanks
I haven't tried to update my actual system to version 8.2.0 yet it is still using 8.1.8.
But I have tried to download version 8.2.0 and tried manually adding the same plugins to no avail. Maybe you can walk me through the whole step, I may be missing something.
Don't mind version 8.2.0 yet since I didn't implement it on my actual system yet. Let's focus on version 8.1.8 since this is the version that I am having problem with
@Faizal, @Sean any updates on this? maybe this is a problem with your template
Hi Peng Serrano,
Verify in the assets file /assets/plugins/global/plugins.bundle.js to check if there is a reference to FormValidation. You can use the search function to locate it.
Double-check the source path for FormValidation in your gulp.config.js file. Ensure that it points to the correct location. Note that in the latest version, the folder path for FormValidation might be different from previous versions, so make sure it aligns with the correct path, for example: /plugins/@form-validation/umd/bundle/popular.min.js .
Hi Faizal, just had the time again to continue working with the theme, I already succeeded by double-checking the path for demo1, but when I tried the same for demo43, it didn't seem to be working.
I think I got it now, I tried doing it again from scratch, and I double-checked the correct path, and then I think the problem was that I didn't copy the @form-validation folder into my project folder.
Great to hear that you resolved the issue! If you ever have more questions or run into any other challenges, feel free to reach out.
