jQuery Validation

The jQuery Validation Plugin provides drop-in validation for your existing forms, while making all kinds of customizations to fit your application really easy.
Read the official jQuery Validation Documentation for a full list of instructions and other options.

1. Initialize the plugin by referencing the necessary files:

<!-- Vendor files -->
<script src="jquery.validate.min.js"></script>

<!-- Template files -->
<link rel="stylesheet" type="text/css" href="app-assets/css/plugins/forms/form-validation.css">

      
2. Binding to existing DOM element.

<form id="jquery-val-form" method="post">...</div>

      
3. Basic usage looks something like this:

$('#jquery-val-form').validate({
    rules: { ... },
    messages: { ... }
});

      

To read and understand more about rules property, go to rules documentation.

To read and understand more about messages property, go to messages documentation.

Validate Flatpickr

var picker = $('#dob');

picker.flatpickr({
  onReady: function (selectedDates, dateStr, instance) {
    if (instance.isMobile) {
      $(instance.mobileInput).attr('step', null);
    }
  }
});

      
Validate Select2

var select = $('.select2');

select.each(function () {
  var $this = $(this);
  $this.wrap('<div class="position-relative"></div>');
  $this
    .select2({
      placeholder: 'Select value',
      dropdownParent: $this.parent()
    })
    .change(function () {
      $(this).valid();
    });
});

      
Default jQuery Validation is applied Globally

The following code is applied globally in app-assets/js/core/app.js file. If you want to change anything globally, you can change it in the following function but if you want to change or add something, you can also do for any specific page js file.


// jQuery Validation Global Defaults
if (typeof jQuery.validator === 'function') {
  jQuery.validator.setDefaults({
    errorElement: 'span',
    errorPlacement: function (error, element) {
      if (
        element.parent().hasClass('input-group') ||
        element.hasClass('select2') ||
        element.attr('type') === 'checkbox'
      ) {
        error.insertAfter(element.parent());
      } else if (element.hasClass('form-check-input')) {
        error.insertAfter(element.parent().siblings(':last'));
      } else {
        error.insertAfter(element);
      }

      if (element.parent().hasClass('input-group')) {
        element.parent().addClass('is-invalid');
      }
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('error');
      if ($(element).parent().hasClass('input-group')) {
        $(element).parent().addClass('is-invalid');
      }
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('error');
      if ($(element).parent().hasClass('input-group')) {
        $(element).parent().removeClass('is-invalid');
      }
    }
  });
}

      

Refer following links for detailed documentation, configuration options, methods and examples:

Bootstrap Validation

Provide valuable, actionable feedback to your users with HTML5 form validation. For 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. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.

Read the official Bootstrap Validation Documentation for a full list of instructions and other options.

1. Binding to existing DOM element.

<form class="needs-validation" novalidate>
  <div class="mb-1">
    <label for="validationCustom01">First name</label>
    <input
      type="text"
      id="validationCustom01"
      class="form-control"
      placeholder="Name"
      aria-label="Name"
      required
    />
    <div class="valid-feedback">Looks good!</div>
    <div class="invalid-feedback">Please enter your name.</div>
  </div>
  ...
</div>

      
2. Basic usage looks something like this:

var bootstrapForm = $('.needs-validation');

Array.prototype.filter.call(bootstrapForm, function (form) {
  form.addEventListener('submit', function (event) {
    if (form.checkValidity() === false) {
      form.classList.add('invalid');
    }
    form.classList.add('was-validated');
    event.preventDefault();
  });
});

      

Refer following links for detailed documentation, configuration options, methods and examples: