Form Validation Plugins Integration

If you are new for Form Validation Plugins Integration, here you start with the integration.

Basic Steps to Form Validation Plugin Integration with Materio admin template.

We are using Form Validation with YARN/NPM Package. Also, we have added basic plugins but to utilize other plugins, please follow steps below:

Find plugin from Plugin List to check which plugin you want to use. Let's add PasswordStrength plugin here.
Find form validation Password Strength NPM package, at PasswordStrength page for using the npm packages.
Open package.json file and add dependencies after form-validation's dependencies as below

...
"dependencies": {
  "@form-validation/bundle": "^2.4.0",
  "@form-validation/core": "^2.4.0",
  ...
  "@form-validation/plugin-password-strength": "^2.4.0",  // like this
  ...
}

Now, Install packages using NPM/YARN:

yarn
OR
npm install

This will install form validation plugin-password-strength plugin in node_modules/ folder

Now, We need to create js file for this plugin. Create passwprd-strength.js file inside libs/@form-validation/ folder and add below code:

import { PasswordStrength } from '@form-validation/plugin-password-strength';
try {
  FormValidation.plugins.PasswordStrength = PasswordStrength;
} catch (e) {}

export { PasswordStrength };

Build assets to compile new javascript file and create inside assets/vendor/libs/@form-validation/ folder.
To integrate password strength plugin, you need to include generated library asset file to the HTML page where you want to integrate it with form validation

Note: Make sure you have included other form validation assets. And you need to update path if you have updated the structure.

<script src="../../assets/vendor/libs/@form-validation/passwprd-strength.js"></script>

Now, you can customize page js as per your requirements. Here, Let's say, we want to update password strength using this plugin. So we need add above script to form-validation.blade.php page.

Then, we need to update assets/js/form-validation.js file to update password strength of the field. Like,

formValidation(
document.getElementById('demoForm'),
{
  fields: {
    ...
  },
  plugins: {
    passwordStrength: new PasswordStrength({
      ...
    }),
    ...
  },
});

Find more information about the Password Strength plugin for it's usage, examples, options, etc...

That's it. You have successfully integrated form validation plugin with Materio admin template.

You can integrate other plugins like explained steps above.