Today, I will explain to you about How many types of form validation which used in the fronted.

As per specific client requirement when you creating any custom form in the frontend via your custom module or theme so you need to make sure about without using any 3rd party validation tool, How can you do it using Magento 2 validation widget?

So, just check below 3 different ways to do form validation.

Assume that you already have custom from which have form id like “magento-expertise-form”.

Method 1: Accept javascript validation using the x-magento-init script.

<script type="text/x-magento-init">
{
    "#magento-expertise-form": {
    "validation": {}
    }
}
</script>

Note: Just add above script after closing your tag and add your custom validation rule in between open and close parentheses i.e: {}

Method 2: Using HTML attribute.

<form data-mage-init='{"validation": {}}' 
class="form" id="magento-expertise-form" method="post" autocomplete="off">

Note: You can also apply the rule directly via HTML like the above example.

Method 3: Call validation using javascript.

<script type="text/javascript">
require([
  'jquery',
  'mage/mage'
], function($){
	var dataForm = $('#magento-expertise-form');
	dataForm.mage('validation', {});
});
</script>

Note: same as the above 2 methods you also need to add your validation rule in dataForm.mage method.

As per Magento 2, validation library output comes from below location:
lib/web/mage/validation.js

Thanks for reading this post!