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
      Galera to com uma duvida aqui, no javascript é possível fazer uma função dentro de outra e uma acessar os valores de uma var da outra?
       
      Por exemplo digamos que eu tenha uma function a() e uma function b(), eu preciso que a function a utilize valores de variáveis que estarão na function b, se isto for possível a função b terá que estar dentro de a ou seria ao contrario?
    • By israel@iproduce.com.br
      Olá,
      Boa noite!
      Tenho algumas vagas para motion (basicamente banner de internet animado e vinhetas para redes sociais) para a cidade do Rio de Janeiro. As vagas são temporárias (6 meses), podendo ocorrer a efetivação nesse período. É necessário estar alocado no escritório no Rio.
      Conhecimento avançado em: Adobe Animate CC, Google Web Designer, After Effects.
      Além destes programas é um diferencial conhecer a linguagens: HTML5, CSS3 e Javascript.
      Tem interesse ou conhece alguém que esteja precisando? Então manda o seu portifólio e CV para no e-mail: freela@iproduce.com.br
      Boa sorte!
    • By Vinicius Bazan
      Sou leigo ainda no Java Script e não manjo de muita coisa ainda, eu preciso fazer uma função que que deve ser executada na pagina HTML, eu crio a função dentro da tag <script> na <head> do html, mas como eu chamo essa função no momento que eu precisar no <body>, o que eu devo digitar pro código saber que ali deve executar a função?
    • By PRWEB
      Boa tarde!!!
       
      Por favor como faço para marcar um checkbox e ai marca automaticamente um campo radio?
       
      Obrigado
    • By Randys
      Eu selecionei um elemento e adicionei a classe ativo nele, agora não estou conseguindo remover a classe quando eu seleciono outro elemento
      const article = document.getElementById(id); article.classList.add('ativo'); Eu preciso remover a classe ativo quando eu clicar em outro elemento article, como faço isso?
×

Important Information

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