Habilitar ou desabilitar submit usando validação jQuery

isaborges · Setembro 30, 2018

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <title>Exercicio 02 </title>
</head>
<body>
    <form action="#">
    <h3>Cadastro</h3>
    <p>
    <label for="campotexto">Nome: </label>
    <input type="text" name="campoTexto" id="campoTexto" required>
    </p>
    <p>
    <label for="email">E-mail:</label>
    <input type="email" name="email" id="email" required>
    <p>
    <label for="telefone">Telefone: </label>
    <input type="telefone" name="telefone" id="telefone">
    </p>
    <label for="telefone">Celular: </label>
    <input type="telefone" name="telefone" id="telefone">
       </p>
    </label>

<form id="form">
     <input type='radio' name='tipopessoa' id='fisica'> CPF
     <input type='radio' name='tipopessoa' id='juridica'> CNPJ
     <div id="documentType">
         <label></label>
         <input id='' type='text' name=''>
     </div> <br><br>
</form>
    
<script>

$(function() {
    var documentType = $('#documentType');
    documentType.hide();
    function showInput(id) {
        if(id =='fisica') {
            $('#documentType label').text('CPF');
            $('#documentType input').prop('name','cpf');
            $('#documentType input').prop('id','cpf');
            documentType.show();
        }
        if(id =='juridica') {
            $('#documentType label').text('CNPJ');
            $('#documentType input').prop('name','cnpj');
            $('#documentType input').prop('id','cnpj');
            documentType.show();
        }
    }
    $(document).on('click', 'input[type=radio]', function(){
        var id = $(this).prop('id');
        showInput(id);
    });
});

</script> 

<script>    function HabiDsabi(){  if(document.getElementById('habi').checked == true)
{document.getElementById('envia').disabled = ""  }  if(document.getElementById('habi').checked == false)
{    document.getElementById('envia').disabled = "disabled"  }  }
    </script>
    <form name="form1"><input type="checkbox" name="habi" id="habi" onClick="HabiDsabi()">Concordo sem Ler
        <br>
    <input type="submit" name="envia" id="envia" value="Cadastrar" disabled>

</form>


</body>
</html>

Bom dia, Pessoal!

Estou fazendo um exercício e não estou conseguindo fazer a parte de validação.

O meu código está assim:

<!DOCTYPE html>
<html lang="pt-br">
<head>
   <meta charset="UTF-8">
   <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
   <title>Exercicio 02 </title>
</head>
<body>
<form action="#">
   <h3>Cadastro</h3>
   <p>
   <label for="campotexto">Nome: </label>
   <input type="text" name="campoTexto" id="campoTexto" required>
   </p>
   <p>
   <label for="email">E-mail:</label>
   <input type="email" name="email" id="email" required>
<p>
   <label for="telefone">Telefone: </label>
<input type="telefone" name="telefone" id="telefone">
   </p>
   <label for="telefone">Celular: </label>
<input type="telefone" name="telefone" id="telefone">
    </p>
</label>

$(function() {
var documentType = $('#documentType');
documentType.hide();
function showInput(id) {
if(id =='fisica') {
$('#documentType label').text('CPF');
$('#documentType input').prop('name','cpf');
$('#documentType input').prop('id','cpf');
documentType.show();
}
if(id =='juridica') {
$('#documentType label').text('CNPJ');
$('#documentType input').prop('name','cnpj');
$('#documentType input').prop('id','cnpj');
documentType.show();
}
}
$(document).on('click', 'input[type=radio]', function(){
var id = $(this).prop('id');
showInput(id);
});
});

</script>

</form>

</body>
</html>

Anexo está a imagem do que foi pedido no exercício.

Ps: Estou iniciando o estudo, agradeço desde já a disponibilidade em ajudar.

andersonhese · Outubro 16, 2018

Aí vão algumas dicas:

Indente o seu código: Assim você consegue achar os erros mais rapidamente, caso haja.
Evite usar nomes repetidos de classes/ids para elementos diferentes, se você tem dois elementos com o mesmo ID e mesma Classe como você vai diferenciar? (Estou falando do telefone/celular, no seu HTML)
Faça pouco e vá avançando: Se você precisa validar vários campos faça o seguinte, crie um HTML com apenas um INPUT e uma LABEL, faça o controle dele, fazendo o dele você irá conseguir fazer o controle de todos, apenas mudando a classe, ou o ID.

Veja se te ajuda: https://codepen.io/andersonhese/pen/YJYgzO

Julio Cavallari · Outubro 16, 2018

Impedir o envio do formulário é bem simples:

let form = document.querySelector('#form1');
form.addEventListener('submit', function(event){
  let input = document.querySelector("#input");//Faça todos os testes que precisa aqui
  if(input.value == '' || input.value == null){//Teste aqui se tudo é válido
    event.preventDefault();//Se não for válido o javascript vai prevenir o submit de ser completado
  }
});

Entrar

Arquivado

Habilitar ou desabilitar submit usando validação jQuery

Pergunta

isaborges 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

2 respostas a esta questão

Recommended Posts

andersonhese 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Julio Cavallari 3

Compartilhar este post

Link para o post

Compartilhar em outros sites

Consulta sem duplicação

Modelagem para questionário

Converter jpg para webp

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante