JSFiddle - React, Tailwind, and code Playground

by Константин Дралюк

HTML

<form action="" name="test" data-a-validation="true" method="POST">
  <input type="text" data-a-empty="true">
  <input type="text" data-a-empty="true1">
  <input type="submit">
</form>

JavaScript

(function(){

	window._aValidation = _av = {};
	_av.registered = _ar = {};
  
	// Add listener on submit for every form
  window.addEventListener('submit', validate);
  
  function validate(e) {
  
  	// Define variables
  	var form, children, dataset, name, key, value;
    
    // Get form element
    form = e.target;
    
    // Check if form require aValidation
    if (form.dataset.aValidation === 'true') {
      
      // Get form children
      children = form.childNodes;
      
      // Iterate over each form child
      children.forEach(function(el){
      	
        // Check if element is valid for iteration
        if (el.type !== 'submit' && el.nodeType === 1) {
          
          // Get dataset
          dataset = el.dataset;
          
          // Iterate over each data-attribute
          for (name in dataset) {
            
            // Get key-value pair from each data-attribute
            key = name; value = dataset[name];
            
            // Make switch cycle over each data-attribute 
            switch(key) {
            
            	// If data-attribute length in validation list
              case _ar[key] instanceof Function: {
              	_ar[key](value);
              };
              
              default: {
                e.preventDefault();
              };
              
            };
          };
        };
      });
    };
  };
  
  // Warn function that is printed in console when parameter given to data-attribute has no handler to be done over 
  function warn(key, value) {
    console.warn('[a-validation]:', `Attribute ${key} doesn't have ${value} option!`);
  };
  
  // Error function that prints message after form element if value is not valid
  function error(el, template_string) {
  	el.insertAdjacentHTML('afterEnd', '<div class="error-message">'+template_string+'</div>');
  };
  
  function register(data_name, data_parameter, func) {
  	_ar[data_name] = function(){
    	return func(data_parameter)
    };
 ...