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 thgsousa312
      uma função que recebe uma frase e uma palavra antiga e uma palavra nova. A função deve retornar uma string contendo a frase original, mas com a última ocorrência da palavra antiga substituída pela palavra nova. A entrada e saída de dados deve ser feita no programa principal. Exemplo:  
      Frase: “Quem parte e reparte fica com a maior parte”
      Palavra antiga: “parte”  Palavra nova: “parcela”
      Resultado a ser impresso no programa principal: “Quem parte e reparte fica com a maior parcela”
       
      function trocarNome(){
              
          var frase = document.getElementById("frase").value;
          var strAntiga = document.getElementById("strAntiga").value;
          var strNova = document.getElementById("strNova").value;
          //frase = frase.split(" ");
          var a = frase.lastIndexOf(strAntiga);
          var fras2 = frase.lastIndexOf(strAntiga).replace(strAntiga,strNova);
          document.getElementById("demo").innerHTML = "Certo";
      }
    • By prometheusz
      Amigos bom dia, sou novo aqui
      Tenho a seguinte tabela  :
       
       
      gostaria de capturar os ids quando fosse clicado no botão pegar valor do codigo porem do jeito que fiz ele só captura o 88 nao importa qual mlinha eu clique ele so captura o numero 88
       
      codigo:

       
      <script> $(function () { $(document).on('click', '.btn-danger', function (e) { e.preventDefault; var codigo =document.getElementsByTagName('th')[5].innerHTML; alert(codigo) }); }); </script> <?php while ($dado = ibase_fetch_object($consulta_retorno)){ ?> <tr> <th data-title="ID"><?php echo ($dado->ID)?> </th> <td data-title="Nome"><?php echo utf8_encode($dado->NOME)?></td> <td data-title="DataCompra"><?php echo date("d/m/Y", strtotime($dado->DATACOMPRA))?></td> <td data-title="Email"><?php echo utf8_encode($dado->EMAIL)?></td> <td> <button class="btn-danger">Pegar Valor do Código</button></td> </tr> <?php }?>  
       
    • By VCastilho
      Bom Dia
      Estou fazendo uma pagina do meu site via Elementor, e começou a aparecer alguns erros no console que não consigo localizar a raiz.
      Inclusive a função de Carrossel de Imagens não está funcionando, esta inserido na Div porém não funciona, poderia me ajudar?
      Segue o link referente ao site:
       
    • By Guss
      A programadora Cafiaspirina Cruz deseja que todos os elementos <h2> de sua página ganhassem a classe "titulo", para que depois a fonte dos <h2> pudesse ser modificada por um CSS,  deixando-os com um destaque específico. Escreva abaixo um código em Javascript para que todos os <h2> da página ganhem a classe "titulo" de uma única vez?
    • By mxclxrx
      l>
          <head>
              <title>Pergunta 1</title>
          </head>
          <body>
              
              <h3>Pergunta 1</h3>
              <form name="resp" action="pergunta2.php" method="POST">
                  O que é nanotecnologia?<br><br>
                      a)<input type="radio" name="resposta" value="a">é a teoria física que obtém sucesso no estudo dos sistemas físicos cujas dimensões são próximas ou abaixo da escala atômica, tais como moléculas, átomos, elétrons, prótons e de outras partículas subatômicas, muito embora também possa descrever fenômenos macroscópicos em diversos casos.<br><br>
                      b)<input type="radio" name="resposta" value="b">é o estudo de manipulação da matéria em escala atômica e molecular e incluí o desenvolvimento de materiais que está associada a diversas áreas como a medicina, eletrônica, ciência da computação, física, química, biologia e engenharia dos materiais entre outras.<br><br>
                      c)<input type="radio" name="resposta" value="a">é a ciência que estuda a composição, estrutura, propriedades da matéria, as mudanças sofridas por ela durante as reações químicas e a sua relação com a energia.<br><br>
                      d)<input type="radio" name="resposta" value="a">baseia-se na lei da conservação das massas, na lei das proporções definidas e na lei das proporções múltiplas. <br><br>
                      e)<input type="radio" name="resposta" value="a">são protozoários caracterizados pela presença de organelos em forma de pêlos ou tentáculos sugadores chamados cílios.<br><br>
                      
                      <br><br>
                      <input type="submit" name="confirmar" value="confirmar">
              </form>
              <?php
                  
                  if(isset($_POST['confirma'])){
                      $resposta= $_POST['resposta'];
                      $certa= $_POST['certa'];
                      $certa= "b";s
                  
                  if($resposta==$certa){
                      echo('<script>window.alert("Parabens! Voce acertou!");window.location="pergunta2.php";</script>');
                  }else{
                      header('location:pergunta1.php');
                  }
                  }
              ?>
              
          </body>
      </html>
×

Important Information

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