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">...</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('custom-control-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: