JSFiddle - React, Tailwind, and code Playground

HTML

<form id="form" action="">
  Nome: <input type="text" id="nome" class="required">
  <span id="textinho-nome"></span>
  <br><br>
  Email: <input type="text" id="email" class="required">
  <span id="textinho-email"></span>
  <br><br>
  <button type="submit" >Enviar</button>
</form>

CSS

*{
  margin: 0; padding: 0
}
body{
  padding: 50px;
}
input, span{
  display: inline-block;
}

JavaScript

var form = document.getElementById("form");

function valida_form(form){
  var inputs = form.querySelectorAll('.required');
  var minLength = 3;
  var forInputs = function(callback){
  	[].forEach.call(inputs, callback)
  }
  var isValid = {
  	minLength: function(input){
   		if (input.value.length >= minLength) return true
      else return false
    }
  }
  var validate = {
  	invalid: function(input){
      var texto = form.querySelector("#textinho-"+input.id);
      input.focus();
      input.style.border = "1px solid #ef3c59";
      texto.innerHTML = '<p class="help-block ng-binding" style="color:#ef3c59;">Campo obrigatĂłrio</p>';
      input.setAttribute('data-correct', 'false')
    },
    valid: function(input){
       var texto = form.querySelector("#textinho-"+input.id);
       texto.innerHTML = '';
       input.style.border = "1px solid #999";
       input.setAttribute('data-correct', 'true')
    }
  }
  forInputs(function(input, i){
  	input.addEventListener('keyup', function(){
      if(isValid.minLength(input)){
        validate.valid(input);
      }else{
      	validate.invalid(input);
      }
    });
  });
  form.onsubmit = function(e){
    if(inputs.length != form.querySelectorAll('.required[data-correct="true"]').length){
			e.preventDefault();
      forInputs(function(input){
        if(!isValid.minLength(input)) validate.invalid(input);
      });
      return false;
    }
  }
}
valida_form(form);