0

Preciso validar os inputs de um formulário. Estou trabalhando com JSP, javascript e códigos html. É esperado que o sistema funcione assim: A pessoa compra e tem as etapas de compra. Na 1º estapa, a pessoa coloca a quantidade, depois ao clicar no botão "Continuar", ele deve validar se o usuário preencheu aquele campo de quantidade, senão ele não deixa ir para a próxima etapa. Eu tentei fazer isso com form e não deu muito certo. Seria possível fazer essa validação por javascript ou algum comando dentro do html?

Código

    <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>
2
  • boa tarde amigo, veja se isso ajuda no seu problema: revista-programar.info/artigos/… Commented 28/03/2017 às 19:18
  • Não me ajudou muito, pois lá tem um form, e o form faz com que as informações vão para outra pagina. No meu caso não daria certo, pois todas as etapas estão numa mesma página (pagina que contem "abas", na qual são as etapas), se eu sair e voltar a página, a ordem das etapas se inicia novamente, perdendo os dados preenchidos Commented 29/03/2017 às 19:02

3 Respostas 3

0

Esse codigo verifica todos os inputs dentro da table, com o atributo required , se tiver um input sem valor ele adiciona um background vermelho e um placeholder = "Esse Campo é obrigatório !" e então retorna false para a função continuar


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

Mais eu recomendo você adicionar um class a todos os seus inputs e então fazer assim

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

Você pode usar o minlength="3" por exemplo.

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

Ou também pattern=".{3,}"

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

Observe que os campos estão com required ou seja são obrigatórios.

0

Consegui resolver dessa forma:

Através de um javascript, colocando a validação no botão. Ao chamá-lo, ele valida se os campos estão preenchidos, senão, ele não vai para a próxima etapa

$(".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";
        }
    });

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .