How to validate empty html fields

Question

I need to validate the inputs of a form. I am working with JSP, javascript and html codes. The system is expected to work like this: The person buys and has the purchase steps. In the 1st stasis, the person puts the quantity, then when clicking on the "Continue" button, he must validate if the user has filled that quantity field, otherwise he won’t let go to the next step. I tried to do this with form and it didn’t work very well. It would be possible to do this validation by javascript or some command within html?

Code

    <ul class="nav nav-tabs" role="tablist">

        <li role="presentation" class="active">
            <a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="" data-original-title="PRODUTO" aria-expanded="true">
                <span class="round-tab">
                    <p align="center"><img src="images/p1.png" height="60" width="60"></p>
                </span>
            </a>
        </li>

        <li role="presentation" class="disabled">
            <a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="" data-original-title="ENVIO" aria-expanded="false">
                <span class="round-tab">
                    <p align="center"><img src="images/p2.png" height="60" width="60"></p>
                </span>
            </a>
        </li>
    </ul>

<div class="tab-content">                                                    
    <div class="tab-pane active" role="tabpanel" id="step1">                                                        
        <div class="step1">
            <div class="row">
                <div class="preview col-md-6">
                    <p align="center"><img src="images/xbox.png" height="300" width="200"></p>
                </div>
                <div class="col-xs-5">
                    <h2>Dados do Produto</h2>  

                    <table style="width:100%">                                                                        
                        <tr>
                            <td>Produto</td>
                            <td><%=anuncio.getTitulo()%></td>
                        </tr>
                        <tr>
                            <td>Qtd. disponivel: </td>
                            <td><%=anuncio.getQuantidade()%></td>
                        </tr>
                        <tr>
                            <td>Qtd. desejada: </td>
                            <td><input type="text" id="quantity" name="quantity" value="1" disabled="disabled" size="4" required></td>
                        </tr>
                        <tr>
                            <td>Valor Unitario: </td>
                            <td><%=anuncio.getPreco()%></td>
                        </tr>
                    </table> 
                        <ul class="list-inline pull-right">
                            <li><input type="button"  class="btn btn-primary next-step" value="CONTINUAR"></li>
                        </ul>           
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

You can use the minlength="3" for example.

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

Or else pattern=".{3,}"

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

Note that the fields are with required that is are mandatory.

Answer 2

That code checks all inputs inside the table, with the attribute required , if you have a input worthless he adds a background red and a placeholder = "This Field is mandatory !" and then returns false for the function carry on

---

 <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;
}

Answer 3

I managed to solve it that way:

Through a javascript, placing the validation on the button. When calling it, it validates if the fields are filled in, otherwise it does 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";
        }
    });