Jump to content
luigiferrari

Desativar botão até todos os campos estarem preenchidos

Recommended Posts

Criei um Form para fazer Cadastro, sempre que o usuário clica no botão para cadastrar é enviado um e-mail para o ADM.

O meu problema é o seguinte, quando tem algum campo não preenchido e o usuário clica em cadastrar, o email é enviado e só depois o alert do campo obrigatório aparece.

Gostaria de um JS que desativa o botão cadastrar até todos os campos estarem preenchidos corretamente.

E também que quando a pessoa clicasse no Botão cadastrar, ele iria desativar novamente, para evitar o usuário de clicar mais de uma vez e acabar enviando mais emails...

 

Segue o meu form...

Citar

 <form id="novo_evento" action="cadastrar(logado).php" method="get" class="padding-center" style="top: 0;">

Citar


                     <div class="form-group col-md-6">
                <label for="txtData">Data:</label>
                <input type="date" class="form-control" id="txtHorario_saida" name="Start">
            </div>
            

              <div class="form-group col-md-6">
                <label for="txtHorariosaida">Horario de Saida:</label>
                <input type="time" class="form-control" id="txtHorario_saida" placeholder="--:--" name="horario_saida">
            </div>

              <div class="form-group col-md-6">
                <label for="txtRetorno">Horario de Retorno:</label>
                <input type="time" class="form-control" id="txtHorario_retorno" placeholder="--:--" name="horario_retorno">
            </div>

  
          <div class="form-group col-md-6">
                <label for="txtLocal">Local de Destino:</label>
                <input type="text" class="form-control" id="txtLocal" name="Title">
            </div>
            <div class="form-group col-md-6">
            <label for="txtQtdpessoa">Quantidade de pessoas que vão no Carro:</label>
            <input type="text" class="form-control" id="txtQtdpessoa" name="qtdpessoa">
           
             

        </div>

             <div class="form-group col-md-6">
                
                <input type="hidden" class="form-control" id="txtmotorista" name="motorista" value="A_definir">
            </div>
            <div class="form-group col-md-6">
                
                <input type="hidden" class="form-control" id="txtTotal_lugares" name="total_lugares" value="34" >
            </div>


<div class="form-group col-md-10"></div>

        <div class="form-row">
            <div class="col">
                <button type="submit" class="btn btn-primary col-md-12"  name="salvar">Agendar</button>
            </div>

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

 

Share this post


Link to post
Share on other sites

você pode fazer a validação no arquivo php. seria bem simples.

Até pq é ir em inspecionar elemento e burlar esta validação em JS.
Mas você pode criar uma função no JS que faça isso. use Jquery, é uma mão na roda:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 function validation(){
   if($("#ID_INPUT").val() == "" || $("#ID_INPUT").val() == "" || $("#ID_INPUT").val() == "" || $("#ID_INPUT").val() == ""){
    	// campos vazios
      $("#ID_BOTAO").prop("disabled", true);
    }else{
    	$("#ID_BOTAO").prop("disabled", false);
    }
 
 }

Agora é so chamar a função toda vez que o usuário estiver digitando em alguma input:

 $("#ID_INPUT").keyup(validation());

 

Share this post


Link to post
Share on other sites
Em 19/05/2019 at 13:09, luannsr12 disse:

Agora é so chamar a função toda vez que o usuário estiver digitando em alguma input:


 $("#ID_INPUT").keyup(validation());

 

 

Só um detalhe, você está executando o validation no momento da atribuição da mesma, assim ele não vai validar a cada keyup e sim apenas quando o script chegar nesta linha.

 

A correção seria...

 

 $("#ID_INPUT").keyup(validation);

 

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 renato.tomio
      Criar um sistema de votação para uma premiação musical. Esse sistema deverá ser desenvolvido utilizando HTML + Javascript ES6.
       
       
      a) Existem 4 candidatos concorrendo ao prêmio:
      i) Rita Lee (número 100)
      ii) Cartola (número 101)
      iii) Ney Matogrosso (número 102)
      iv) Anitta (número 103)
      b) Para realizar a votação, o usuário terá que digitar seu CPF e o número do candidato.
      i) O usuário não pode votar duas vezes.
      ii) Se o usuário votar em um número inválido, o sistema contabilizará esse voto como nulo.
      c) Devido a um conflito da confraternização, a candidata Anitta foi desclassificada mas não deu tempo de retirá-la do painel de votação. Você terá que realizar uma validação avisado que o voto nela não é válido (dando a possibilidade desse mesmo usuário votar em outro candidato).
      d) O sistema deve mostrar automaticamente a quantidade e porcentagem de voto de cada candidato (parecido com o protótipo).
      i) O cálculo da porcentagem dos candidatos deverá desconsiderar os votos nulos
      LINK DO PROTOTIPO: https://www.figma.com/proto/S8tKx3hDbJJNaWJ9WFjzINVY/Prova?node-id=0%3A1&viewport=766%2C1015%2C0.5&scaling=scale-down&redirected=1
    • By michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By Lincoln Ferreira
      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>
    • By marcelocardoso
      Fala galera...
      Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
      A nível de conhecimento, segue código para:::

      1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
      2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

      CODE:
       
      $(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

      Dicas, Sugestões como fazer, realizar, agradeço.
      Obrigado.

       
    • By Guss
      var carro = {
      cor = "azul",
      modelo = "fusca",
      marca = "Volwagen,
      kms = 10000,
      combustivel = "gasolina"
      }
       
×

Important Information

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