Jump to content
Lincoln Ferreira

Como adicionar validação no Jquery steps wizard

Recommended Posts

Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.

http://www.jquery-steps.com/Examples

 

     if (newIndex === 2 && $("#Rua").val() == "") {
        return false;
     }
    
    $(document).ready(function() {   
    
      $("#wizard").steps({
    
          headerTag: "h2",
          bodyTag: "section",
          transitionEffect: "slideLeft",
          stepsOrientation: "vertical",
          labels: {
            current: "current step:",
            pagination: "Pagination",
            finish: "Finalizar",
            next: "Confirmar",
            previous: "Voltar",
            loading: "Carregando ..."
          },
          onStepChanging: function(event, currentIndex, newIndex, cepError) {
            if (currentIndex > newIndex) {
              return true;
            }
    
            if (newIndex === 1) {
              return true;
            }
    
            if (newIndex === 2 && $("#Rua").val() == "") {
    
              return false;
            }
    
          }
        }
    
      )
    });
        
     <div id="wizard">
            <h2>Verificação pedido</h2>
            <section>
                <h2><strong>Pedido:</strong></h2>

                <div class="lista-carrinho"></div>

            </section>

            <h2>Local de entrega</h2>
            <section>
                <div class="informações-usuario">

                    <form method="get" action="." id="#form-cep">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="cep">Cep:</label>
                                <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="rua">Rua:</label>
                                    <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" />
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="bairro">Bairro:</label>
                                    <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" />
                                </div>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="n">N°:</label>
                                    <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" />
                                </div>
                            </div>
                            <div class="form-group col-md-6">
                                <label for="complemento">Complemento:</label>
                                <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-11">
                                    <label for="cidade">Cidade:</label>
                                    <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" />
                                </div>
                            </div>


                        </div>
                    </form>
                </div>

            </section>

            <h2>Forma de pagamento</h2>
            <section>
                <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 ">
                    <h2>Informe sua forma de pagamento :</h2>
                </div>
                <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 ">

                    <div class="col-2">
                        <li class="list-inline-item">
                            <div class="pure-radiobutton">
                                <input id="Dinheiro" name="dinheiro" type="radio" class="radio">
                                <label for="Dinheiro">Dinheiro</label>
                            </div>
                        </li>
                    </div>
                    <div class="row">
                    
                    </div>
                    <div class="col-2">

                        <li class="list-inline-item">
                            <div class="pure-radiobutton">
                                <input id="Cartao" name="cartao" type="radio" class="radio">
                                <label for="Cartao">Cartão</label>
                            </div>
                        </li>
                    </div>
                </div>

            </section>

        </div>

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Deniz F
      Sou iniciante, aprendendo JS. Fiquei com dúvida sobre o funcionamento das referências externas.
      Coloquei funções no arquivo app.js e funcionam sem problemas.
       
      Mas os códigos dentro da tag <script> só funcionam no HTML. Se colocar no arquivo .js (sem as tags obviamente) não está funcionando. 
      Alguém saberia me dizer por quê?
       
      Obrigado.
       
       
      <html>
          <head>
              <script src="app.js"></script>
          </head>
       
          <body>
       
              <p id="sentence" onmouseover="changeSize()" onmouseout="backToSize()">Testing app.js functions. They work!</p>  
              <p id="result"></p>
                      
                 <script>
                  var x = 20;
                  var y = 30;
                  var z = x + y;
                  document.getElementById("result").innerHTML = "The result is " + z;
              </script>
       
         </body>
      </html>
    • By binds
      Olá Caríssimos,
       
      Não tenho muito conhecimento de javascript, desde já agradeço se alguém puder me ajudar.
      Preciso criar uma página simples de validação por idade para acessar uma página, a ideia é simples:
      se a pessoa nasceu antes de 2002 redireciona a página meusite_com_br/maior 
      mas se ela nasceu depois de 2002 redireciona a página meusite_com_br/menor
      Garimpando achei o código abaixo que fiz alguns ajustes, porém não sei como abrir as respectivas paginas meusite_com_br/menor ou meusite_com_br/maior como resultado, o resultado nesse caso são textos:  "MENOR 18" : "MAIOR DE 18"
       
      <!DOCTYPE html> <html> <body> <CENTER> <h2>Validador de Idade</h2> <p>Digite o ano que você nasceu para acessar o site:</p> <input id="age" value="Ex: 1990" /> <br> <button onclick="myFunction()">ACESSAR SITE</button> <p id="demo"></p> <script> function myFunction() {   var age, voteable;   age = Number(document.getElementById("age").value);   if (isNaN(age)) {     voteable = "Você não inseriu um ano válido. <BR> Exemplo: 2020";   } else {     voteable = (age > 2002) ? "MENOR 18" : "MAIOR DE 18";   }   document.getElementById("demo").innerHTML = voteable; } </script> </CENTER> </body> </html>  
      Novamente agradeço a ajuda!
      Luis
       
    • By violin101
      Caros amigos, saudações...
       
      Desculpa em recorrer aos amigos, mas estou com uma dúvida referente a SOMA total de uma coluna da TABELA.
       
      Abaixo postei o trecho onde alimento a Tabela via Javascript.
       
      os Campos(input) são passado dessa forma:
      ====[ qtde......: 3
      ====[ vlrunit...: 1,01
      ====[ vlrtotal..: 3,03
       
      O Problema que estou me deparando é a Soma Total do Campo vlrtotal.
      $("#btn-agregar").on("click",function(){ //Recebe dados do Forumulário e Atualiza a Tabela var qtde = document.getElementById("qtde").value; var vlrunit = document.getElementById("vlrunit").value; var vlrtotal = document.getElementById("vlrtotal").value; if(qtde == "" || vlrunit == "" || vlrtotal == ""){ alert("Atenção! Nenhuma QUANTIDADE ou VALOR foi informado."); } else { html = "<tr>"; html += "<td><input type='hidden' name='idProdutos[]' value='"+infoprd[0]+"'>"+infoprd[1]+"</td>"; html += "<td><input type='hidden' name='descricao[]' value='"+infoprd[2]+"'>"+infoprd[2]+"</td>"; html += "<td style='text-align:center;'>"+infoprd[3]+"</td>"; html += "<td style='text-align:center;'>"+qtde+"</td>"; html += "<td style='text-align:right;'>"+vlrunit+"</td>"; html += "<td style='text-align:right;'>"+vlrtotal+"</td>"; html += "<td style='text-align:center;'>"+ "<button type='button' class='btn btn-danger btn-remove-produto' style='padding: 2px 5px;' title='Remover Item da Lista'>"+ "<span class='fa fa-remove'></span></button></td>"; html += "</tr>"; $("#tbventas tbody").append(html); sumar(); $("#btn-agregar").val(null); $("#descricao").val(null); $("#cod_interno").val(null); $("#prd_unid").val(null); $("#qtde").val(null); $("#vlrunit").val(null); $("#vlrtotal").val(null); } });  
      O trecho do Código abaixo é a função para realizar a soma.
      function sumar(){ subtotal = 0; $("#tbventas tbody tr").each(function(){ subtotal = subtotal + Number($(this).find("td:eq(5)").text()); }); $("input[name=subtotal]").val(subtotal.toFixed(2)); }  
       
      Infelizmente não consigo realizar a Soma do VlrTotal, o sistema mostra apenas NaN, ou apenas 0.
       
      Como consigo efetuar a soma correta no Formato MOEDA ?
       
      Grato,
       
       
      Cesar
       
       
    • By marsolim
      fala rapaziada tudo bem? sabe me dizer se tem diferença de performance, de compatibilidade e etc e tal entre o jquery $(this).val() e o javascript puro this.value? tava tentando pesquisar aqui mas não achei nada sobre.
      grato
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.