HTML Habilitar ou desabilitar submit usando validação de campos

isaborges · 30 de setembro de 2018

Boa tarde, 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>

<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>

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

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

DiF · 1 de outubro de 2018

@isaborges Olá,

Não sei se entendi completamente, mas se entendi, podes usar a validação do html 5 required nos campos que sejam obrigatórios. Nos opcionais você deixa em branco.

Quanto a parte do CPF/CNPJ podes usar um radio button para habilitar ou desabilitar os campos desejados. a função que você pode estudar é prop("disabled", true) e false.

Alternativamente você pode definir pelo jquery o CSS visibility hidden ou visible para os elementos desejados ao invés de desabilita-los como eu coloquei no exemplo.

Quanto ao botão de submit, você pode ativar ele somente quando todos os campos tiverem preenchidos e a caixa checkbox marcada...

Veja um exemplo: http://jsfiddle.net/dife/hq67g3a0/66/

Nele tem a validação do HTML 5 nos campos, e mostra como ativar e desativar o botão de submit.

Porém o exemplo não aborda a validação dos campos e do checkbox junto para aceitar o envio. Esta parte você deve tentar fazer sozinha!

Quanto ao seu código postado acima, a parte do HTML, está um pouco errada. No caso não precisa abrir a tag <form> para cada elemento.

Abra apenas um e coloque todos os elementos dentro do mesmo.

Outro erro bem comum também é misturar partes em jQuery e partes em javascript puro!

Melhor escrever em um só estilo. No caso é melhor você seguir somente no jQuery.