<form class="needs-validation" novalidate>
  <div class="form-floating form-floating-outline mb-6">
    <input type="text" class="form-control" id="bs-validation-name" placeholder="John Doe" required />
    <label for="bs-validation-name">Name</label>
    <div class="valid-feedback"> Looks good! </div>
    <div class="invalid-feedback"> Please enter your name. </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <input type="email" id="bs-validation-email" class="form-control" placeholder="john.doe" aria-label="john.doe" required />
    <label for="bs-validation-email">Email</label>
    <div class="valid-feedback"> Looks good! </div>
    <div class="invalid-feedback"> Please enter a valid email </div>
  </div>
  <div class="mb-4 form-password-toggle">
    <div class="input-group input-group-merge">
      <div class="form-floating form-floating-outline">
        <input type="password" id="bs-validation-password" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" required />
        <label for="bs-validation-password">Password</label>
      </div>
      <span class="input-group-text rounded-end cursor-pointer" id="basic-default-password4"><i class="ri-eye-off-line"></i></span>
      <div class="valid-feedback"> Looks good! </div>
      <div class="invalid-feedback"> Please enter your password. </div>
    </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <select class="form-select" id="bs-validation-country" required>
      <option value="">Select Country</option>
      <option value="usa">USA</option>
      <option value="uk">UK</option>
      <option value="france">France</option>
      <option value="australia">Australia</option>
      <option value="spain">Spain</option>
    </select>
    <label class="form-label" for="bs-validation-country">Country</label>
    <div class="valid-feedback"> Looks good! </div>
    <div class="invalid-feedback"> Please select your country </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <input type="text" class="form-control flatpickr-validation" placeholder="YYYY-MM-DD" id="bs-validation-dob" required />
    <label for="bs-validation-dob">DOB</label>
    <div class="valid-feedback"> Looks good! </div>
    <div class="invalid-feedback"> Please Enter Your DOB </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <input type="file" class="form-control" id="bs-validation-upload-file" required />
    <label for="bs-validation-upload-file">Profile pic</label>
  </div>
  <div class="mb-4">
    <label class="d-block form-label">Gender</label>
    <div class="form-check mb-2">
      <input type="radio" id="bs-validation-radio-male" name="bs-validation-radio" class="form-check-input" required />
      <label class="form-check-label" for="bs-validation-radio-male">Male</label>
    </div>
    <div class="form-check">
      <input type="radio" id="bs-validation-radio-female" name="bs-validation-radio" class="form-check-input" required />
      <label class="form-check-label" for="bs-validation-radio-female">Female</label>
    </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <textarea class="form-control h-px-75" id="bs-validation-bio" name="bs-validation-bio" rows="3" placeholder="My name is john" required></textarea>
    <label for="bs-validation-bio">Bio</label>
  </div>
  <div class="mb-4">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="bs-validation-checkbox" required />
      <label class="form-check-label" for="bs-validation-checkbox">Agree to our terms and conditions</label>
      <div class="invalid-feedback"> You must agree before submitting. </div>
    </div>
  </div>
  <div class="mb-4">
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="bootstrapValidationSwitch" required />
      <label class="form-check-label" for="bootstrapValidationSwitch">Send me related emails</label>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

// Flat pickr
const flatPickrEL = $(".flatpickr-validation");
if (flatPickrEL.length) {
  flatPickrEL.flatpickr({
    allowInput: true,
    monthSelectorType: "static"
  });
}

// Fetch all the forms we want to apply custom Bootstrap validation styles to
var bsValidationForms = document.querySelectorAll(".needs-validation");

// Loop over them and prevent submission
Array.prototype.slice.call(bsValidationForms).forEach(function(form) {
  form.addEventListener(
    "submit",
    function(event) {
      if (!form.checkValidity()) {
        event.preventDefault();
        event.stopPropagation();
      } else {
        // Submit your form
        alert("Submitted!!!");
      }

      form.classList.add("was-validated");
    },
    false
  );
});

<form class="needs-validation" novalidate>
  <div class="form-floating form-floating-outline mb-6">
    <input type="text" class="form-control is-valid" id="bs-validation-server-name" placeholder="John Doe" value="John Doe" required />
    <label for="bs-validation-server-name">Name</label>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <input type="email" id="bs-validation-server-email" class="form-control is-invalid" placeholder="john.doe" aria-label="john.doe" required />
    <label for="bs-validation-server-email">Email</label>
    <div class="invalid-feedback">
      Please enter a valid email
    </div>
  </div>
  <div class="mb-4 form-password-toggle">
    <div class="form-floating form-floating-outline">
      <input type="password" id="bs-validation-server-password" class="form-control is-invalid" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" required />
      <label for="bs-validation-server-password">Password</label>
      <div class="invalid-feedback">
        Please enter your password.
      </div>
    </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <select class="form-select is-valid" id="bs-validation-server-country" required>
      <option value="">Select Country</option>
      <option value="usa">USA</option>
      <option value="uk" selected>UK</option>
      <option value="france">France</option>
      <option value="australia">Australia</option>
      <option value="spain">Spain</option>
    </select>
    <label for="bs-validation-server-country">Country</label>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <input type="text" class="form-control flatpickr-validation is-invalid" id="bs-validation-server-dob" required />
    <label for="bs-validation-server-dob">DOB</label>
    <div class="invalid-feedback">
      Please Enter Your DOB
    </div>
  </div>
  <div class="mb-4">
    <label class="d-block form-label">Gender</label>
    <div class="form-check mb-2">
      <input type="radio" id="bs-validation-server-radio-male" name="bs-validation-server-radio" class="form-check-input is-invalid" required />
      <label class="form-check-label" for="bs-validation-server-radio-male">Male</label>
    </div>
    <div class="form-check">
      <input type="radio" id="bs-validation-server-radio-female" name="bs-validation-server-radio" class="form-check-input is-invalid" required />
      <label class="form-check-label" for="bs-validation-server-radio-female">Female</label>
    </div>
  </div>
  <div class="form-floating form-floating-outline mb-6">
    <textarea class="form-control is-valid" id="bs-validation-server-bio" name="validationBioBootstrap" rows="3" style="height: 80px;" required>Something about me..</textarea>
    <label for="bs-validation-server-bio">Bio</label>
  </div>
  <div class="mb-4">
    <div class="form-check">
      <input type="checkbox" class="form-check-input is-invalid" id="bs-validation-server-checkbox" required />
      <label class="form-check-label" for="bs-validation-server-checkbox">Agree to our terms and conditions</label>
      <div class="invalid-feedback">
        You must agree before submitting.
      </div>
    </div>
  </div>
  <div class="mb-6">
    <div class="form-check form-switch">
      <input type="checkbox" class="form-check-input is-valid" id="relatedEmailsSwitch" checked required />
      <label class="form-check-label" for="relatedEmailsSwitch">Send me related emails</label>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

<form class="needs-validation" novalidate>
  <div class="position-relative mb-12">
    <div class="form-floating form-floating-outline">
      <input type="text" class="form-control is-valid" id="bs-validation-tooltip-name" placeholder="John Doe" value="John Doe" required />
      <label for="bs-validation-tooltip-name">Name</label>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="position-relative mb-12">
    <div class="form-floating form-floating-outline">
      <input type="email" id="bs-validation-tooltip-email" class="form-control is-invalid" placeholder="john.doe" aria-label="john.doe" required />
      <label for="bs-validation-tooltip-email">Email</label>
      <div class="invalid-tooltip">
        Please enter a valid email
      </div>
    </div>
  </div>
  <div class="position-relative mb-12 form-password-toggle">
    <div class="form-floating form-floating-outline">
      <input type="password" id="bs-validation-tooltip-password" class="form-control is-invalid" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" required />
      <label for="bs-validation-tooltip-password">Password</label>
      <div class="invalid-tooltip">
        Please enter your password.
      </div>
    </div>
  </div>
  <div class="position-relative mb-12">
    <div class="form-floating form-floating-outline">
      <select class="form-select is-valid" id="bs-validation-tooltip-country" required>
        <option value="">Select Country</option>
        <option value="usa">USA</option>
        <option value="uk" selected>UK</option>
        <option value="france">France</option>
        <option value="australia">Australia</option>
        <option value="spain">Spain</option>
      </select>
      <label for="bs-validation-tooltip-country">Country</label>
      <div class="valid-tooltip">
        Looks good!
      </div>
    </div>
  </div>
  <div class="position-relative mb-12">
    <div class="form-floating form-floating-outline">
      <input type="text" class="form-control flatpickr-validation is-invalid" id="bs-validation-tooltip-dob" required />
      <label for="bs-validation-tooltip-dob">DOB</label>
      <div class="invalid-tooltip">
        Please Enter Your DOB
      </div>
    </div>
  </div>
  <div class="position-relative mb-12">
    <div class="form-floating form-floating-outline">
      <textarea class="form-control is-valid" id="bs-validation-tooltip-bio" name="bs-validation-tooltip-bio" rows="3" required>Something about me..</textarea>
      <label for="bs-validation-tooltip-bio">Bio</label>
      <div class="valid-tooltip">
        Looks Good
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

<form id="formValidationExamples" class="row g-5">
  <!-- Account Details -->

  <div class="col-12">
    <h5>1. Account Details</h5>
    <hr class="mt-0" />
  </div>

  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <input type="text" id="formValidationName" class="form-control" placeholder="John Doe" name="formValidationName" />
      <label for="formValidationName">Full Name</label>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <input class="form-control" type="email" id="formValidationEmail" name="formValidationEmail" placeholder="john.doe" />
      <label for="formValidationEmail">Email</label>
    </div>
  </div>

  <div class="col-md-6">
    <div class="form-password-toggle">
      <div class="input-group input-group-merge">
        <div class="form-floating form-floating-outline">
          <input class="form-control" type="password" id="formValidationPass" name="formValidationPass" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multicol-password2" />
          <label for="formValidationPass">Password</label>
        </div>
        <span class="input-group-text cursor-pointer" id="multicol-password2"><i class="ri-eye-off-line"></i></span>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-password-toggle">
      <div class="input-group input-group-merge">
        <div class="form-floating form-floating-outline">
          <input class="form-control" type="password" id="formValidationConfirmPass" name="formValidationConfirmPass" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="multicol-confirm-password2" />
          <label for="formValidationConfirmPass">Confirm Password</label>
        </div>
        <span class="input-group-text cursor-pointer" id="multicol-confirm-password2"><i class="ri-eye-off-line"></i></span>
      </div>
    </div>
  </div>

  <!-- Personal Info -->
  <div class="col-12">
    <h5 class="mt-2">2. Personal Info</h5>
    <hr class="mt-0" />
  </div>

  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <input class="form-control" type="file" id="formValidationFile" name="formValidationFile">
      <label for="formValidationFile">Profile Pic</label>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <input type="text" class="form-control flatpickr-validation" name="formValidationDob" id="formValidationDob" placeholder="YYYY-MM-DD" required />
      <label for="formValidationDob">DOB</label>
    </div>
  </div>

  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <select id="formValidationSelect2" name="formValidationSelect2" class="form-select select2" data-allow-clear="true">
        <option value="">Select</option>
        <option value="Australia">Australia</option>
        <option value="Bangladesh">Bangladesh</option>
        <option value="Belarus">Belarus</option>
        <option value="Brazil">Brazil</option>
        <option value="Canada">Canada</option>
        <option value="China">China</option>
        <option value="France">France</option>
        <option value="Germany">Germany</option>
        <option value="India">India</option>
        <option value="Indonesia">Indonesia</option>
        <option value="Israel">Israel</option>
        <option value="Italy">Italy</option>
        <option value="Japan">Japan</option>
        <option value="Korea">Korea, Republic of</option>
        <option value="Mexico">Mexico</option>
        <option value="Philippines">Philippines</option>
        <option value="Russia">Russian Federation</option>
        <option value="South Africa">South Africa</option>
        <option value="Thailand">Thailand</option>
        <option value="Turkey">Turkey</option>
        <option value="Ukraine">Ukraine</option>
        <option value="United Arab Emirates">United Arab Emirates</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="United States">United States</option>
      </select>
      <label for="formValidationSelect2">Country</label>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <input type="text" value="" class="form-control" name="formValidationLang" id="formValidationLang" placeholder="React" />
      <label for="formValidationLang">Languages</label>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <select class="selectpicker tech-select w-100" id="formValidationTech" data-style="btn-default"  data-tick-icon="ri-check-line text-white" name="formValidationTech" multiple>
        <option>JavaScript</option>
        <option>TypeScript</option>
        <option>PHP</option>
        <option>Python</option>
        <option>Laravel</option>
        <option>.NET</option>
      </select>
      <label for="formValidationTech">Tech</label>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <select class="selectpicker hobbies-select w-100" id="formValidationHobbies" data-style="btn-default"  data-tick-icon="ri-check-line text-white" name="formValidationHobbies" multiple>
        <option>Sports</option>
        <option>Movies</option>
        <option>Books</option>
      </select>
      <label for="formValidationHobbies">Hobbies</label>
    </div>
  </div>

  <div class="col-md-6">
    <div class="form-floating form-floating-outline">
      <textarea class="form-control h-px-100" id="formValidationBio" name="formValidationBio" placeholder="My name is john" rows="3"></textarea>
      <label for="formValidationBio">Bio</label>
    </div>
  </div>
  <div class="col-md-6">
    <label class="form-label">Gender</label>
    <div class="form-check custom mb-2">
      <input type="radio" id="formValidationGender" name="formValidationGender" class="form-check-input" />
      <label class="form-check-label" for="formValidationGender">Male</label>
    </div>

    <div class="form-check custom">
      <input type="radio" id="formValidationGender2" name="formValidationGender" class="form-check-input" />
      <label class="form-check-label" for="formValidationGender2">Female</label>
    </div>
  </div>

  <!-- Choose Your Plan -->
  <div class="col-12">
    <h5 class="mt-2">3. Choose Your Plan</h5>
    <hr class="mt-0" />
  </div>
  <div class="row gy-3 mt-0">
    <div class="col-xl-3 col-md-5 col-sm-6 col-12">
      <div class="form-check custom-option custom-option-icon">
        <label class="form-check-label custom-option-content" for="basicPlanMain1">
          <span class="custom-option-body">
            <i class="ri-rocket-line"></i>
            <span class="custom-option-title"> Starter </span>
            <small> Get 5gb of space and 1 team member. </small>
          </span>
          <input name="formValidationPlan" class="form-check-input" type="radio" value="" id="basicPlanMain1" checked />
        </label>
      </div>
    </div>
    <div class="col-xl-3 col-md-5 col-sm-6 col-12">
      <div class="form-check custom-option custom-option-icon">
        <label class="form-check-label custom-option-content" for="basicPlanMain2">
          <span class="custom-option-body">
            <i class="ri-user-3-line"></i>
            <span class="custom-option-title"> Personal </span>
            <small> Get 15gb of space and 5 team member. </small>
          </span>
          <input name="formValidationPlan" class="form-check-input" type="radio" value="" id="basicPlanMain2" />
        </label>
      </div>
    </div>
    <div class="col-xl-3 col-md-5 col-sm-6 col-12">
      <div class="form-check custom-option custom-option-icon">
        <label class="form-check-label custom-option-content" for="basicPlanMain3">
          <span class="custom-option-body">
            <i class="ri-vip-crown-line"></i>
            <span class="custom-option-title"> Premium </span>
            <small> Get 25gb of space and 15 members. </small>
          </span>
          <input name="formValidationPlan" class="form-check-input" type="radio" value="" id="basicPlanMain3" />
        </label>
      </div>
    </div>
  </div>

  <div class="col-12">
    <div class="form-check form-switch">
      <input class="form-check-input" type="checkbox" id="formValidationSwitch" name="formValidationSwitch" required />
      <label class="form-check-label" for="formValidationSwitch">Send me related emails</label>
    </div>
  </div>
  <div class="col-12">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="formValidationCheckbox" name="formValidationCheckbox" />
      <label class="form-check-label" for="formValidationCheckbox">Agree to our terms and conditions</label>
    </div>
  </div>
  <div class="col-12">
    <button type="submit" name="submitButton" class="btn btn-primary">Submit</button>
  </div>
</form>

document.addEventListener('DOMContentLoaded', function (e) {
(function () {
  const formValidationExamples = document.getElementById('formValidationExamples'),
    formValidationSelect2Ele = jQuery(formValidationExamples.querySelector('[name="formValidationSelect2"]')),
    formValidationTechEle = jQuery(formValidationExamples.querySelector('[name="formValidationTech"]')),
    formValidationLangEle = formValidationExamples.querySelector('[name="formValidationLang"]'),
    formValidationHobbiesEle = jQuery(formValidationExamples.querySelector('[name="formValidationHobbies"]'));

  const fv = FormValidation.formValidation(formValidationExamples, {
    fields: {
      formValidationName: {
        validators: {
          notEmpty: {
            message: 'Please enter your name'
          },
          stringLength: {
            min: 6,
            max: 30,
            message: 'The name must be more than 6 and less than 30 characters long'
          },
          regexp: {
            regexp: /^[a-zA-Z0-9 ]+$/,
            message: 'The name can only consist of alphabetical, number and space'
          }
        }
      },
      formValidationEmail: {
        validators: {
          notEmpty: {
            message: 'Please enter your email'
          },
          emailAddress: {
            message: 'The value is not a valid email address'
          }
        }
      },
      formValidationPass: {
        validators: {
          notEmpty: {
            message: 'Please enter your password'
          }
        }
      },
      formValidationConfirmPass: {
        validators: {
          notEmpty: {
            message: 'Please confirm password'
          },
          identical: {
            compare: function () {
              return formValidationExamples.querySelector('[name="formValidationPass"]').value;
            },
            message: 'The password and its confirm are not the same'
          }
        }
      },
      formValidationFile: {
        validators: {
          notEmpty: {
            message: 'Please select the file'
          }
        }
      },
      formValidationDob: {
        validators: {
          notEmpty: {
            message: 'Please select your DOB'
          },
          date: {
            format: 'YYYY/MM/DD',
            message: 'The value is not a valid date'
          }
        }
      },
      formValidationSelect2: {
        validators: {
          notEmpty: {
            message: 'Please select your country'
          }
        }
      },
      formValidationLang: {
        validators: {
          notEmpty: {
            message: 'Please add your language'
          }
        }
      },
      formValidationTech: {
        validators: {
          notEmpty: {
            message: 'Please select technology'
          }
        }
      },
      formValidationHobbies: {
        validators: {
          notEmpty: {
            message: 'Please select your hobbies'
          }
        }
      },
      formValidationBio: {
        validators: {
          notEmpty: {
            message: 'Please enter your bio'
          },
          stringLength: {
            min: 100,
            max: 500,
            message: 'The bio must be more than 100 and less than 500 characters long'
          }
        }
      },
      formValidationGender: {
        validators: {
          notEmpty: {
            message: 'Please select your gender'
          }
        }
      },
      formValidationPlan: {
        validators: {
          notEmpty: {
            message: 'Please select your preferred plan'
          }
        }
      },
      formValidationSwitch: {
        validators: {
          notEmpty: {
            message: 'Please select your preference'
          }
        }
      },
      formValidationCheckbox: {
        validators: {
          notEmpty: {
            message: 'Please confirm our T&C'
          }
        }
      }
    },
    plugins: {
      trigger: new FormValidation.plugins.Trigger(),
      bootstrap5: new FormValidation.plugins.Bootstrap5({
        // Use this for enabling/changing valid/invalid class
        // eleInvalidClass: '',
        eleValidClass: '',
        rowSelector: function (field, ele) {
          // field is the field name & ele is the field element
          switch (field) {
            case 'formValidationName':
            case 'formValidationEmail':
            case 'formValidationPass':
            case 'formValidationConfirmPass':
            case 'formValidationFile':
            case 'formValidationDob':
            case 'formValidationSelect2':
            case 'formValidationLang':
            case 'formValidationTech':
            case 'formValidationHobbies':
            case 'formValidationBio':
            case 'formValidationGender':
              return '.col-md-6';
            case 'formValidationPlan':
              return '.col-xl-3';
            case 'formValidationSwitch':
            case 'formValidationCheckbox':
              return '.col-12';
            default:
              return '.row';
          }
        }
      }),
      submitButton: new FormValidation.plugins.SubmitButton(),
      // Submit the form when all fields are valid
      defaultSubmit: new FormValidation.plugins.DefaultSubmit(),
      autoFocus: new FormValidation.plugins.AutoFocus()
    },
    init: instance => {
      instance.on('plugins.message.placed', function (e) {
        //* Move the error message out of the `input-group` element
        if (e.element.parentElement.classList.contains('input-group')) {
          // `e.field`: The field name
          // `e.messageElement`: The message element
          // `e.element`: The field element
          e.element.parentElement.insertAdjacentElement('afterend', e.messageElement);
        }
        //* Move the error message out of the `row` element for custom-options
        if (e.element.parentElement.parentElement.classList.contains('custom-option')) {
          e.element.closest('.row').insertAdjacentElement('afterend', e.messageElement);
        }
      });
    }
  });

  //? Revalidation third-party libs inputs on change trigger

  // Flatpickr
  flatpickr(formValidationExamples.querySelector('[name="formValidationDob"]'), {
    enableTime: false,
    // See https://flatpickr.js.org/formatting/
    dateFormat: 'Y/m/d',
    // After selecting a date, we need to revalidate the field
    onChange: function () {
      fv.revalidateField('formValidationDob');
    }
  });

  // Select2 (Country)
  if (formValidationSelect2Ele.length) {
    formValidationSelect2Ele.wrap('
');
    formValidationSelect2Ele
      .select2({
        placeholder: 'Select country',
        dropdownParent: formValidationSelect2Ele.parent()
      })
      .on('change.select2', function () {
        // Revalidate the color field when an option is chosen
        fv.revalidateField('formValidationSelect2');
      });
  }

  // Tagify
  let formValidationLangTagify = new Tagify(formValidationLangEle);
  formValidationLangEle.addEventListener('change', onChange);
  function onChange() {
    fv.revalidateField('formValidationLang');
  }

  //Bootstrap select
  formValidationTechEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
    fv.revalidateField('formValidationTech');
  });
  formValidationHobbiesEle.on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
    fv.revalidateField('formValidationHobbies');
  });
})();
});