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 Marceloely
      Eu gostaria de saber como fazer para preencher automaticamente(pré populado) uma página de pagamentos a partir dos dados inseridos em uma página anterior pelo plugin do contact form 7 do wordpress
       
      Os campos até são preenchidos, mas não com a informação inserido no formulário mas sim com a id mesmo que coloquei na URL
        
      <label> Seu nome
          [text nome id:nome class:nome] </label>
      <label> Seu DDD
      [tel DDD id:DDD class:DDD]</label>
      <label> Seu Celular
      [tel celular id:celular class:celular]</label>
      <label> Seu e-mail
      </label>
      <label> Assunto
          [text* your-subject] </label>
      <label> Sua mensagem (opcional)
          [textarea your-message] </label>
      [submit "Enviar"]
      <script>
       document.addEventListener('wpcf7mailsent', function (Event) {
         location = 'https://pay.hotmart.com/A48773288I?ap=5181&name=id:nome&phoneac=id:ddd&phonenumber=id:celular&email=id:email';
       }, false);
      </script>
    • By Marceloely
      Em alguns países, campanhas de publicidade com objetivo de mensagem no instagram são proibidas, tendo isso em vista gostaria de saber se é possível criar um link onde o usuário caia direto no inbox de outra pessoa no instagram? Como se fosse aqueles links do que cai na conversa do whatsapp.
    • By rafa-martin
      Pessoal, boa noite. 
       
      Estou tendo problemas ao passar um  parâmetro do tipo cursor no java no momento que chamo uma proc no oracle. 
       
      Tenho uma procedure que o parâmetro é um cursor. 
       
      create or replace minhaproce(p_result OUT SYS_REFCURSOR)
       
      begin
        open p_result for select * from tabela;
      end;
       
      Até aqui beleza. 
       
      quando chamo no java não está aceitando o tipo cursor.
       
      @Query(value = "{call minhaproce(?)}", nativeQuery = true)
      Collection<Coche> minhaproce(@Param("p_result") OracleTypes.CURSOR) 
       
      não é aceita. mesmo eu colocando como collection Collection<Coche> listaProcedure(@Param("p_result") List<Coche> p_result2), também não aceita. Agora seu eu fizer o select direto com abaixo retorna. 
       
      @Query(value = "SELECT * FROM tabela", nativeQuery = true)
      Collection<Coche> minhaproce();
       
      Por que funciona fazendo o select direto e não funciona pela procedure? Não acho nada na internet alguma coisa parecida.
    • By KBAlbuquerque
      Estou tentando salvar o nome da imagem no banco de dados com um FormData;
      porém está dando que a imagem está nula no Servidor Node JS da API.
       
      Uso React Native e Express File Upload e Node JS.
       
      Muito obrigada.
       
      Segue o código:
       
      Constantes:
           
      const [nome, setNome] = useState('');       const [marca, setMarca] = useState('');       const [modelo, setModelo] = useState('');       const [foto, setFoto] = useState('');       const [fotoNome, setFotoNome] = useState('');       const [fotoType, setFotoType] = useState('');       const [usuarioId, setUsuarioId] = useState('');  
      Código da API:
         
      const nome = req.body.nome;     const marca = req.body.marca;     const modelo = req.body.modelo;     const foto = req.files;     const usuarioId = req.body.usuario_id;      const file = Date.now().toString() + '_' + foto.myfile;      const filePath = path.join(__dirname, 'public', 'imagens');      foto.mv(`${filePath}/${file}`, err => {           if (err) {               return res.send('Imagem não salva!');           } else {               return res.send('Imagem salva com sucesso!');           }     });  
      Escolhe a Imagem:
           
      const escolhaImagem = (response) => {         if (response.didCancel) {             console.log('Cancelado!');         } else if (response.error) {             console.log("Erro na Imagem: " + response.error);         } else if (response.customButton) {             console.log('Botão customizado' + response.customButton);         } else {             setFoto(response);             setFotoUri(response.uri);             setFotoNome(response.fileName);             setFotoType(response.type);         }     }  
      Função FormData no Cadastro:
              
      const formData = new FormData();         formData.append('nome', nome);         formData.append('marca', marca);         formData.append('modelo', modelo);         formData.append('myfile', fotoNome);         formData.append('usuario_id', usuarioId);         console.log(formData);         const headers = {             method: "post",             body: formData,             headers: {                 "Content-Type": "multipart/form-data",                 "Accept": "application/json",             },         }         await fetch(URL_SERVIDOR + '/salvar-veiculo', headers)             .then(response => response.json())             .then(result => {                 console.log(result)             }).catch((err) => {                 console.log("ERRO: " + err);             });  
    • By Dsdaa
      Olá estou fazendo uma tela de login com flask,html,css e js E estou tentando pegar dados para validar se o usuário está cadastrado ou não Como nenhum usuário tem cadastro, então queria que aparecesse uma mensagem dizendo para o usuário se cadastrar e redirecionar para nova tela - mas isso aí eu me viro -, gostaria mesmo de ajuda para pegar esses dados através do button e onclick pois não estou conseguindo :/ . Irei postar o código .html
      Obs: O arquivo de javascript não tem nada
      <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="../Flask-Login/estilo.css"> <title>Login Page</title> <script src="js/scripts.js" defer></script> </head> <body> <div class="row align-items-center h-100 "> <div class="col-8 col-md-3 col-xs-8 mx-auto l-form"> <form id="login-form"> <img class="row mx-auto" src="https://i.imgur.com/RhJpe7c.png" width="150"> <div class="form-group "> <input type="text" name="email" placeholder="Email" class="form-control i-form"> </div> <div class="form-group"> <input type="password" name="password" placeholder="Password" class="form-control i-form"> </div> <div class="form-group"> <button type="button" onclick="userLogin()" class="btn btn-dark btn-md btn-block">Login</button> </div> </form> </div> </div> <script> </script> </body> </html>
×

Important Information

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