Validation

Frest uses default bootstrap validation and FormValidation to validate forms.
Read the official Bootstrap validation and FormValidation Documentations for a full list of instructions and other options.


Browser Default

You can use browser's inbuilt validation by using required attribute with your form fields.

<form class="browser-default-validation col-md-6">
  <div class="mb-3">
    <label class="form-label" for="basic-default-name">Name</label>
    <input type="text" class="form-control" id="basic-default-name" placeholder="John Doe" required />
  </div>
  <div class="mb-3">
    <label class="form-label" for="basic-default-email">Email</label>
    <input type="email" id="basic-default-email" class="form-control" placeholder="john.doe" required />
  </div>
  <div class="mb-3 form-password-toggle">
    <label class="form-label" for="basic-default-password">Password</label>
    <div class="input-group input-group-merge">
      <input type="password" id="basic-default-password" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" aria-describedby="basic-default-password2" required />
      <span class="input-group-text cursor-pointer" id="basic-default-password2"><i class="bx bx-hide"></i></span>
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="basic-default-country">Country</label>
    <select class="form-select" id="basic-default-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>
  </div>
  <div class="mb-3">
    <label class="form-label" for="basic-default-dob">DOB</label>
    <input type="text" class="form-control flatpickr-validation" id="basic-default-dob" required />
  </div>
  <div class="mb-3">
    <label class="form-label" for="basic-default-upload-file">Profile pic</label>
    <input type="file" class="form-control" id="basic-default-upload-file" required />
  </div>
  <div class="mb-3">
    <label class="d-block form-label">Gender</label>
    <div class="form-check mb-2">
      <input type="radio" id="basic-default-radio-male" name="basic-default-radio" class="form-check-input" required />
      <label class="form-check-label" for="basic-default-radio-male">Male</label>
    </div>
    <div class="form-check">
      <input type="radio" id="basic-default-radio-female" name="basic-default-radio" class="form-check-input" required />
      <label class="form-check-label" for="basic-default-radio-female">Female</label>
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="basic-default-bio">Bio</label>
    <textarea class="form-control" id="basic-default-bio" name="basic-default-bio" rows="3" required></textarea>
  </div>
  <div class="mb-3">
    <div class="form-check">
      <input type="checkbox" class="form-check-input" id="basic-default-checkbox" required />
      <label class="form-check-label" for="basic-default-checkbox">Agree to our terms and conditions</label>
    </div>
  </div>
  <div class="mb-3">
    <label class="switch switch-primary">
      <input type="checkbox" class="switch-input" required />
      <span class="switch-toggle-slider">
        <span class="switch-on"></span>
        <span class="switch-off"></span>
      </span>
      <span class="switch-label">Send me related emails</span>
    </label>
  </div>
  <div class="row">
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Bootstrap Validation

Bootstrap States

For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your <form>. This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. In the form below, we've used all of the form related component of bootstrap. Try to submit the form, our JavaScript will intercept the submit button and show you the current state of input fields.

You don't have to include any extra vendor files to validate your form using Bootstrap.

Looks good!
Please enter your name.
Looks good!
Please enter a valid email
Looks good!
Please enter your password.
Looks good!
Please select your country
Looks good!
Please Enter Your DOB
You must agree before submitting.
<form class="needs-validation" novalidate>
<div class="mb-3">
  <label class="form-label" for="bs-validation-name">Name</label>
  <input type="text" class="form-control" id="bs-validation-name" placeholder="John Doe" required />
  <div class="valid-feedback"> Looks good! </div>
  <div class="invalid-feedback"> Please enter your name. </div>
</div>
<div class="mb-3">
  <label class="form-label" for="bs-validation-email">Email</label>
  <input type="email" id="bs-validation-email" class="form-control" placeholder="john.doe" aria-label="john.doe" required />
  <div class="valid-feedback"> Looks good! </div>
  <div class="invalid-feedback"> Please enter a valid email </div>
</div>
<div class="mb-3 form-password-toggle">
  <label class="form-label" for="bs-validation-password">Password</label>
  <div class="input-group input-group-merge">
    <input type="password" id="bs-validation-password" class="form-control" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" required />
    <span class="input-group-text cursor-pointer" id="basic-default-password4"><i class="bx bx-hide"></i></span>
  </div>
  <div class="valid-feedback"> Looks good! </div>
  <div class="invalid-feedback"> Please enter your password. </div>
</div>
<div class="mb-3">
  <label class="form-label" for="bs-validation-country">Country</label>
  <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>
  <div class="valid-feedback"> Looks good! </div>
  <div class="invalid-feedback"> Please select your country </div>
</div>
<div class="mb-3">
  <label class="form-label" for="bs-validation-dob">DOB</label>
  <input type="text" class="form-control flatpickr-validation" id="bs-validation-dob" required />
  <div class="valid-feedback"> Looks good! </div>
  <div class="invalid-feedback"> Please Enter Your DOB </div>
</div>
<div class="mb-3">
  <label class="form-label" for="bs-validation-upload-file">Profile pic</label>
  <input type="file" class="form-control" id="bs-validation-upload-file" required />
</div>
<div class="mb-3">
  <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="mb-3">
  <label class="form-label" for="bs-validation-bio">Bio</label>
  <textarea class="form-control" id="bs-validation-bio" name="bs-validation-bio" rows="3" required></textarea>
</div>
<div class="mb-3">
  <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-3">
  <label class="switch switch-primary">
    <input type="checkbox" class="switch-input" required />
    <span class="switch-toggle-slider">
      <span class="switch-on"></span>
      <span class="switch-off"></span>
    </span>
    <span class="switch-label">Send me related emails</span>
  </label>
</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
  );
});

Server Side

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid respectively. Note that .invalid-feedback is also supported with these classes.

Looks good!
Please enter a valid email
Please enter your password.
Looks good!
Please Enter Your DOB
You must agree before submitting.
<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label class="form-label" for="bs-validation-server-name">Name</label>
    <input type="text" class="form-control is-valid" id="bs-validation-server-name" placeholder="John Doe" value="John Doe" required />
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="bs-validation-server-email">Email</label>
    <input type="text" id="bs-validation-server-email" class="form-control is-invalid" placeholder="john.doe" aria-label="john.doe" required />
    <div class="invalid-feedback">
      Please enter a valid email
    </div>
  </div>
  <div class="mb-3 form-password-toggle">
    <label class="form-label" for="bs-validation-server-password">Password</label>
    <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 />
    <div class="invalid-feedback">
      Please enter your password.
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="bs-validation-server-country">Country</label>
    <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>
    <div class="valid-feedback">
      Looks good!
    </div>
  </div>
  <div class="mb-3">
    <label class="form-label" for="bs-validation-server-dob">DOB</label>
    <input type="text" class="form-control flatpickr-validation is-invalid" id="bs-validation-server-dob" required />
    <div class="invalid-feedback">
      Please Enter Your DOB
    </div>
  </div>
  <div class="mb-3">
    <label class="form-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="mb-3">
    <label class="form-label" class="form-label" for="bs-validation-server-bio">Bio</label>
    <textarea class="form-control is-valid" id="bs-validation-server-bio" name="validationBioBootstrap" rows="3" required>Something about me..</textarea>
  </div>
  <div class="mb-3">
    <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-3">
    <label class="switch">
      <input type="checkbox" class="switch-input is-valid" checked required />
      <span class="switch-toggle-slider">
        <span class="switch-on"></span>
        <span class="switch-off"></span>
      </span>
      <span class="switch-label">Send me related emails</span>
    </label>
  </div>
  <div class="row">
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

Tooltip

If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning.

Looks good!
Please enter a valid email
Please enter your password.
Looks good!
Please Enter Your DOB
Looks Good
<form class="needs-validation" novalidate>
  <div class="position-relative mb-5">
    <label class="form-label" for="bs-validation-tooltip-name">Name</label>
    <input type="text" class="form-control is-valid" id="bs-validation-tooltip-name" placeholder="John Doe" value="John Doe" required />
    <div class="valid-tooltip">
      Looks good!
    </div>
  </div>
  <div class="position-relative mb-5">
    <label class="form-label" for="bs-validation-tooltip-email">Email</label>
    <input type="text" id="bs-validation-tooltip-email" class="form-control is-invalid" placeholder="john.doe" aria-label="john.doe" required />
    <div class="invalid-tooltip">
      Please enter a valid email
    </div>
  </div>
  <div class="position-relative mb-5 form-password-toggle">
    <label class="form-label" for="bs-validation-tooltip-password">Password</label>
    <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 />
    <div class="invalid-tooltip">
      Please enter your password.
    </div>
  </div>
  <div class="position-relative mb-5">
    <label class="form-label" for="bs-validation-tooltip-country">Country</label>
    <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>
    <div class="valid-tooltip">
      Looks good!
    </div>
  </div>
  <div class="position-relative mb-5">
    <label class="form-label" for="bs-validation-tooltip-dob">DOB</label>
    <input type="text" class="form-control flatpickr-validation is-invalid" id="bs-validation-tooltip-dob" required />
    <div class="invalid-tooltip">
      Please Enter Your DOB
    </div>
  </div>
  <div class="position-relative mb-5">
    <label class="form-label" for="bs-validation-tooltip-bio">Bio</label>
    <textarea class="form-control is-valid" id="bs-validation-tooltip-bio" name="bs-validation-tooltip-bio" rows="3" required>Something about me..</textarea>
    <div class="valid-tooltip">
      Looks Good
    </div>
  </div>
  <div class="row">
    <div class="col-12">
      <button type="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</form>

FormValidation

The all new FormValidation a validation library for JavaScript with zero dependencies. FormValidation is the primary validation library for this template, used in pages, apps & other forms.

Features

Usage

In order to use FormValidation on your page, It is required to include the following vendors css in the "Vendors CSS" area from the page's header:

For more details on usage please refer formValidation's getting started guide.

<link rel="stylesheet" href="assets/vendor/libs/@form-validation/umd/styles/index.css" />

Include the following vendors script in the "Vendors JS" area from the page's footer:

<script src="assets/vendor/libs/@form-validation/umd/bundle/popular.min.js"></script>
<script src="assets/vendor/libs/@form-validation/umd/plugin-bootstrap5/index.min.js"></script>
<!-- AutoFocus plugin, automatically focus on the first invalid input  -->
<script src="assets/vendor/libs/@form-validation/umd/plugin-auto-focus/index.min.js"></script>

Example

In this example, we've tried to cover as many form inputs as we can. Though If we've miss any third party libraries, then refer Integrating with 3rd party libraries.

1. Account Details

2. Personal Info

3. Choose Your Plan

<form id="formValidationExamples" class="row g-3">

  <!-- Account Details -->

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


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

  <div class="col-md-6">
    <div class="form-password-toggle">
      <label class="form-label" for="formValidationPass">Password</label>
      <div class="input-group input-group-merge">
        <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" />
        <span class="input-group-text cursor-pointer" id="multicol-password2"><i class="bx bx-hide"></i></span>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="form-password-toggle">
      <label class="form-label" for="formValidationConfirmPass">Confirm Password</label>
      <div class="input-group input-group-merge">
        <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" />
        <span class="input-group-text cursor-pointer" id="multicol-confirm-password2"><i class="bx bx-hide"></i></span>
      </div>
    </div>
  </div>


  <!-- Personal Info -->

  <div class="col-12">
    <h6 class="mt-2 fw-normal">2. Personal Info</h6>
    <hr class="mt-0" />
  </div>

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

  <div class="col-md-6">
    <label class="form-label" for="formValidationSelect2">Country</label>
    <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>
  </div>
  <div class="col-md-6">
    <label class="form-label" for="formValidationLang">Languages</label>
    <input type="text" value="" class="form-control" name="formValidationLang" id="formValidationLang" />
  </div>

  <div class="col-md-6">
    <label class="form-label" for="formValidationTech">Tech</label>
    <input class="form-control typeahead" type="text" id="formValidationTech" name="formValidationTech" autocomplete="off" />
  </div>
  <div class="col-md-6">
    <label class="form-label" for="formValidationHobbies">Hobbies</label>
    <select class="selectpicker hobbies-select w-100" id="formValidationHobbies" data-style="btn-default" data-icon-base="bx" data-tick-icon="bx-check text-white" name="formValidationHobbies" multiple>
      <option>Sports</option>
      <option>Movies</option>
      <option>Books</option>
    </select>
  </div>

  <div class="col-md-6">
    <label class="form-label" for="formValidationBio">Bio</label>
    <textarea class="form-control" id="formValidationBio" name="formValidationBio" rows="3"></textarea>
  </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" checked />
      <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">
    <h6 class="mt-2 fw-normal">3. Choose Your Plan</h6>
    <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="bx bx-rocket"></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="bx bx-user"></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="bx bx-crown"></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">
    <label class="switch switch-primary">
      <input type="checkbox" class="switch-input" name="formValidationSwitch" />
      <span class="switch-toggle-slider">
        <span class="switch-on"></span>
        <span class="switch-off"></span>
      </span>
      <span class="switch-label">Send me related emails</span>
    </label>
  </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) {
  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('.selectpicker')),
    tech = [
      'ReactJS',
      'Angular',
      'VueJS',
      'Html',
      'Css',
      'Sass',
      'Pug',
      'Gulp',
      'Php',
      'Laravel',
      'Python',
      'Bootstrap',
      'Material Design',
      'NodeJS'
    ];

  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 select 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'); }); } // Typeahead // String Matcher function for typeahead const substringMatcher = function(strs) { return function findMatches(q, cb) { var matches, substrRegex; matches = []; substrRegex = new RegExp(q, 'i'); $.each(strs, function(i, str) { if (substrRegex.test(str)) { matches.push(str); } }); cb(matches); }; }; // Check if rtl if (isRtl) { $('.typeahead').attr('dir', 'rtl'); } formValidationTechEle.typeahead( { hint: !isRtl, highlight: true, minLength: 1 }, { name: 'tech', source: substringMatcher(tech) } ); // Tagify let formValidationLangTagify = new Tagify(formValidationLangEle); formValidationLangEle.addEventListener('change', onChange); function onChange() { fv.revalidateField('formValidationLang'); } //Bootstrap select formValidationHobbiesEle.on('changed.bs.select', function(e, clickedIndex, isSelected, previousValue) { fv.revalidateField('formValidationHobbies'); }); }); })();
© 2017- Pixinvent, Hand-crafted & Made with ❤️