fv.destroy() => Uncaught Error: The plguin ___frameworkMessage is registered

[7iomka]

What is the best way to re-init Declarative plugin rules after html5 attributes changed? I have one global initializer for all own forms

/* global initFormValidation */
$(function () {
  // Allow configure localization globally
  const getFormValidationLocalizationConfig = () => {
    return (
      window.formValidationLocalizationConfig || {
        locale: 'en_US',
        localization: FormValidation.locales.en_US,
      }
    );
  };

  const getFormValidationBaseConfig = () => ({
    plugins: {
      trigger: new FormValidation.plugins.Trigger({
        event: 'input', // By default, the field will be validated automatically when the input event is triggered (but that is not true and this plugin helps)
      }),
      declarative: new FormValidation.plugins.Declarative({
        html5Input: true, // the Declarative plugin will automatically enable the validators for the following input type and HTML 5 attributes, see: https://formvalidation.io/guide/examples/using-html-5-inputs-and-attributes/
      }),

      bootstrap: new FormValidation.plugins.Bootstrap5({
        rowSelector: '.fv-row',
        // eleInvalidClass: '',
        eleValidClass: '',
      }),
      // aria: new FormValidation.plugins.Aria(),
      // sequence: new FormValidation.plugins.Sequence({
      //   enabled: true,
      // }),
      autoFocus: new FormValidation.plugins.AutoFocus(),
    },
  });

  function initFormValidation(form) {
    function init() {
      return FormValidation.formValidation(form, {
        ...getFormValidationLocalizationConfig(),
        ...getFormValidationBaseConfig(),
      });
    }

    let fv = form.fv;

    const reinit = () => {
      if (fv) {
        fv.destroy();
      }
      fv = init();
    };

    reinit();

    form.fv = fv;

    $(form).data({
      fv,
      init: reinit,
      reinit,
    });

    return fv;
  }

  // Expose to global scope
  window.initFormValidation = initFormValidation;

  // Init FormValidation instance on initial rendered forms with .js-form-validate
  (() => {
    var $forms = $('.js-form-validate');
    if ($forms.length === 0) return;

    $forms.each(function () {
      initFormValidation(this);
    });
  })();

  // Handle submit all forms with .js-form-validate
  // If form is dynamically created, init FormValidation instance on it
  $(document).on('submit', '.js-form-validate', async function (e) {
    e.preventDefault();

    const $form = $(this);

    let fv = $form.data('fv');

    if (!fv) {
      fv = initFormValidation(this);
    }

    // Validate form before submit
    const status = await fv.validate();
    if (status == 'Valid') {
      $form.trigger('form.awaitSubmit');
    }
    return false;
  });
});

Then, I change on the fly element max attribute $('input').attr('max', 100); Declarative don't see this change and still use old max value. For this purpose I call initFormValidation($('input').closest('form')[0]) That function just call fv.destroy(); then re-initialize validation FormValidation.formValidation(form, ...) again. But error appears FormValidation.min.js:1 Uncaught Error: The plguin ___frameworkMessage is registered After error validation messages not appear.

Please help me!

[phuocng]

The Declarative plugin doesn't watch the attributes and it doesn't update the options when they're changed. You can use the updateValidatorOption() method.

[7iomka]

doesn't update the options when they're changed

I know that Declarative plugin doesn't watch the attributes change, but I use it for a single big purpose: to not remember all list of connection between validators and html5 attributes (https://formvalidation.io/guide/examples/using-html-5-inputs-and-attributes/)

So I as common user need some solution to reset / revalidate all html attributes on the field instead of know what attributes have field and manually update each of them. I try to destroy validation on form at all and reinit, but it produce weird error and re-initialization don't work as The plguin ___frameworkMessage is registered` error occurs because of internal wrong logic creation of Bootstrap5 plugin???)

[phuocng]

@7iomka This was fixed in the latest code. It will be included in the next version. Thanks again for reporting the issue 👍

[ErcinDedeoglu]

• waiting for the release

[deezaster]

oh yes, waiting for the release too.

[phuocng]

The issue is fixed in v1.10.0. Please upgrade.

[cormip]

I am using v1.10.0 ES6 version + Bootstrap5 and still get the error when calling fv.destroy():

Error: The plguin ___frameworkMessage is registered
    at l.registerPlugin (Core.js:1:443)
    at l.install (Framework.js:1:1412)
    at l.uninstall (Bootstrap5.js:1:610)
    at eval (Core.js:1:8383)
    at Array.forEach (<anonymous>)
    at l.destroy (Core.js:1:8355)

[instagibb]

I am using v1.10.0 ES6 version + Bootstrap5 and still get the error when calling fv.destroy():

This is caused by the following issue #82