How to validate blank fields in html

I was able to resolve this:

Through a javascript, by placing the validation on the button. When calling it, it validates if the fields are filled, otherwise it will not go to the next step

$(".next-step2").click(function (e) {
        var titular = document.getElementById('titular').value;
        var numero = document.getElementById('cartao').value;
        var cod = document.getElementById('cod').value;
        var mes = document.getElementById('mesvalidade').value;
        var ano = document.getElementById('anovalidade').value;

        if ((titular!=="")&&(numero!=="")&&(cod!=="")&&(mes!=="")&&(ano!=="")){
            var $active = $('.wizard .nav-tabs li.active');
            $active.next().removeClass('disabled');
            nextTab($active);
        }else{
            document.getElementById('titular').placeholder = "preencha este campo";
            document.getElementById('cartao').placeholder = "preencha este campo";
            document.getElementById('cod').placeholder = "preencha este campo";
            document.getElementById('mesvalidade').placeholder = "preencha este campo";
            document.getElementById('anovalidade').placeholder = "preencha este campo";
        }
    });

This code checks all the inputs within the table, with the required , if you have a input value it adds a red background and a placeholder ="This Field is required!" and then returns false for the continue

 <li><input onclick="continuar()" type="button"  class="btn btn-primary next-step" 

function continuar(){
  var table = document.querySelectorAll("table tbody tr td");
  if (validationInput(table) == true){
    console.log("continuar");
  }else{
    console.log("Não continuar");
  }

}


function validationInput(table){
  var resutado = true;
  for(var i = 0; i < table.length; i++){

    if (table[i].children[0]){
      if (table[i].children[0].nodeName == "INPUT" && table[i].children[0].hasAttribute('required') ){
        if (table[i].children[0].value == ""){

          table[i].children[0].style.background = "Red";
          table[i].children[0].placeholder = "Esse Campo é obrigatório !"

          resutado = false;
        }
      }
    }
  }
  return resutado;
}

More I recommend you add a class to all your inputs and then do so

function continuar(){
  var inputs = document.getElementsByClassName("verification");

  if (validationInput(inputs) == true){
    console.log("continuar");
  }else{
    console.log("Não continuar");
  }

}

function validationInput(inputs){
  var resutado = true;
  for(var i = 0; i < inputs.length; i++){
      if (inputs[i].hasAttribute('required') ){
        if (inputs[i].value == ""){

          inputs[i].style.background = "Red";
          inputs[i].placeholder = "Esse Campo é obrigatório !"
          resutado = false;
        }
      }
    }
  return resutado;
}

You can use minlength="3" for example.

<input type="text" required minlength="3">

Or also pattern=".{3,}"

<input pattern=".{3,}" required title="3 characters minimum">

Please note that fields are required or are required.