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 Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
      Vou está enviando um anexo de como está o projeto atualmente para você ter uma ideia.
       
      Atenciosamente,
      ~Ronaldo

    • By egalauber
      Tenho o seguinte trecho de código:
       
      #anima {
              width:600px;
              height:300px;
              margin:auto;
              
              animation: banner 10s infinite;
          }
       
      @keyframes banner {
              0%, 33% {
                      background:#009;
                  }
              34%, 66% {
                      background:#C00;
                  }
              67%, 100% {
                      background:#390;
                  }
          }
       
      No HTML tenho uma div com id=anima.
      Esse código faz a cada 3 segundos mudar a cor dessa div, tipo como se fosse um slide show.
       
      O que eu preciso fazer, é colocar 3 botões, cada botão mudando pra uma cor. Cada botão mudando pra um pedaço da execução do @keyframes banner.
       
      Botão1 - pula para-> 0%, 33% { background:#009; }
      Botão2 - pula para-> 34%, 66% { background:#C00; }
      Botão3 - pula para-> 67%, 100% { background:#390; }
       
      Como?
    • By fbezerra
      Bom dia galera,
      olha eu tenho essa função que faz download, eu queria modificar pra salvar em uma pasta exemplo "/Clientes" ou usuário escolher o diretório para salvar txt.
       
      function salvar(e) { let data = new Date().toLocaleDateString().slice(0,10); var texto = document.getElementById('conteudo').innerText; let titulo = document.getElementById('nomeCliente').value; let CodCli = document.getElementById('CodCliente').value; var blob = new Blob([texto], { type: "text/plain;charset=utf-8" }); saveAs(blob, titulo + " " + CodCli + " " + data + ".txt"); }  alguém pode me ajudar por favor
    • By asacap1000
      Galera me ajudem por favor, estou pirando kkkkk
       
      Seguinte, tenho um form que realiza o submit via javascrit enviando os dados para uma página php formatada em json.
      Está gravando perfeitamente porém preciso dos dados do retorno, como Link do boleto, e alguns outros resultados para inserir no banco nesse ponto já pesquisei um monte testei de tudo até a página bugar e nada kkkk
       
      o Script que utilizo para o envio é esse:
       
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $("#frmBoleto").submit(function(){ $.ajax({ type: "POST", url: "https://www.sitedaloja.com.br/action/boleto_bradesco/gerando_boleto.php", data: $(this).serializeArray(), }).done(function( msg ) { }); return false; }); </script> Como fazer para capturar os dados  da resposta do json?  
×

Important Information

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