Web

formvalidation.io

Installation

npm install @form-validation/bundle
npm install @form-validation/locales
npm install @form-validation/styles
npm install @form-validation/plugin-j

Typical code

| css
    <?php if ( defined('PAGE_OPTIONS') and in_array('formvalidation', PAGE_OPTIONS) ) { ?>
      <link rel="stylesheet" href="/node_modules/@form-validation/plugin-bootstrap5/lib/styles/index.min.css" />
      <link rel="stylesheet" href="/node_modules/@form-validation/styles/lib/styles/index.min.css" />
    <?php } ?>
| javascript
  <?php if ( defined('PAGE_OPTIONS') and in_array('formvalidation', PAGE_OPTIONS) ) { ?>
    <script src="/node_modules/@form-validation/bundle/lib/umd/popular.min.js"></script>
    <script src="/node_modules/@form-validation/locales/lib/umd/nl_BE.min.js"></script>
    <script src="/node_modules/@form-validation/plugin-bootstrap5/lib/umd/index.min.js"></script>
    <script src="/node_modules/@form-validation/"></script>
  <?php } ?>

Typical errors

  • Cannot read properties of null (reading 'classList')
    • Caused by bootstrap5-plugin: this requires the form-control to be embedded in a .row div > the .row div will contain the .fv-plugins-bootstrap5-row-invalid style and add a .fv-plugins-message-container.invalid-feedback div to the bottom of the row.