Javascript Campo checkbox Campo Obrigatório

LucasRodriguesBorges · 22 de fevereiro de 2021

Boa tarde, pessoal, tudo bem?

Estou precisando de ajuda estou desenvolvimento um formulário de contato, preciso coloca um checkbox, é deixar o checkbox obrigatório, mas não estou conseguindo deixar.

Muito obrigado pela ajuda.

                    <form id="FormCurriculum">

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="nome">Nome</label> <br />

                            <input type="text" id="nome" class="form-control" />

                            <div class="collapse" id="erronomecurriculum" name="erronomecurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>

                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="curremail">E-mail</label> <br />

                            <input type="text" id="curremail" class="form-control" />

                            <div class="collapse" id="vazioemailcurriculum" name="vazioemailcurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>

                            <div class="collapse" id="erroemailcurriculum" name="erroemailcurriculum">

                                <p style="color: red;"> Insira um e-mail válido</p>

                            </div>

                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="curriculum2">Copie e cole seu currículo aqui :</label> <br />

                            <textarea class="form-control" id="curriculum2" name="curriculum2" rows="7"></textarea>

                            <div class="collapse" id="errocurriculum" name="errocurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>
   
                        </div>

                         <br />

                         <div class="col-sm-12 col-md-12 col-lg-12 form-group">


                            <input type="checkbox" name="lgpd" value="De Acordo" id="lgpd" required="required" class="ui-state-error h5-active"> Eu li, estou ciente das condições de tratamento dos meus dados pessoais e dou meu consentimento, quando aplicável, conforme descrito nesta <a href="#" style="color:#ad033b" target="_blank">Política de Privacidade</a>.
                            <br>
                            <div class="collapse" id="errocurriculum" name="errocurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>
   
                        </div>

                            
                        <div>



                            <input type="button" value="Enviar" id="TrabalheEnviar" class="btn-form">

                            <input type="reset" value="Apagar Campos" class="btn-form">

                        </div>

                    </form>

Marcelo Calazans · 22 de fevereiro de 2021

@LucasRodriguesBorges Olá colega.

Usando <input type="button">, você precisaria fazer assim para tratar isso com Java script:

<input type="button" value="Enviar" id="TrabalheEnviar" class="btn-form" onclick="testa()">

Veja abaixo:
https://www.w3schools.com/tags/att_input_type_button.asp

Segue abaixo o código todo:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<form id="FormCurriculum">

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="nome">Nome</label> <br />

                            <input type="text" id="nome" class="form-control" />

                            <div class="collapse" id="erronomecurriculum" name="erronomecurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>

                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="curremail">E-mail</label> <br />

                            <input type="text" id="curremail" class="form-control" />

                            <div class="collapse" id="vazioemailcurriculum" name="vazioemailcurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>

                            <div class="collapse" id="erroemailcurriculum" name="erroemailcurriculum">

                                <p style="color: red;"> Insira um e-mail válido</p>

                            </div>

                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="curriculum2">Copie e cole seu currículo aqui :</label> <br />

                            <textarea class="form-control" id="curriculum2" name="curriculum2" rows="7"></textarea>

                            <div class="collapse" id="errocurriculum" name="errocurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>
   
                        </div>

                         <br />

                         <div class="col-sm-12 col-md-12 col-lg-12 form-group">


                            <input type="checkbox" name="lgpd" value="De Acordo" id="lgpd" required="required" class="ui-state-error h5-active"> Eu li, estou ciente das condições de tratamento dos meus dados pessoais e dou meu consentimento, quando aplicável, conforme descrito nesta <a href="#" style="color:#ad033b" target="_blank">Política de Privacidade</a>.
                            <br>
                            <div class="collapse" id="errocurriculum" name="errocurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>
   
                        </div>

                            
                        <div>



                            <input type="button" value="Enviar" id="TrabalheEnviar" class="btn-form" onclick="testa()">

                            <input type="reset" value="Apagar Campos" class="btn-form">

                        </div>

                    </form>

<script>
function testa() {
  var checkBox = document.getElementById("lgpd");
  if (checkBox.checked == false){ alert('concorde por favor'); }
}
</script>  

</body>
</html>

Testei aqui este código e está funcionando, veja se roda aí com você.

Abraços.

LucasRodriguesBorges · 23 de fevereiro de 2021

@Marcelo Calazans , bom dia!

Tudo bem?

Fiz um teste aqui no site, e não deu certo mesmo ele parece o alert, quando clica em ok sem marca o campo, mas quando clica em "Ok" no Alert enviar o formulário. Poderia me ajudar?

Muito obrigado.

Marcelo Calazans · 23 de fevereiro de 2021

1 hora atrás, LucasRodriguesBorges disse:

@Marcelo Calazans , bom dia!

Tudo bem?

Fiz um teste aqui no site, e não deu certo mesmo ele parece o alert, quando clica em ok sem marca o campo, mas quando clica em "Ok" no Alert enviar o formulário. Poderia me ajudar?

Muito obrigado.

Mas é isso mesmo que vai acontecer. Eu coloquei o alert apenas para sinalizar dentro do if quando o javascript detecta que foi clicado no botão sem marcar o checkbox. Agora você teria que ver como isso iria ficar no caso do seu código, e substituir o alert por outra coisa que fique adequada para você.

Mas vou dar uma sugestão. Porque você não esquece o javascript então para isso, e deixa o próprio HTML fazer esse trabalho? Talvez fosse mais fácil para você.

Seria trocar isso:

<input type="button" value="Enviar" id="TrabalheEnviar" class="btn-form" onclick="testa()">

Por isso:

<input type="submit" value="Enviar" id="TrabalheEnviar" class="btn-form">

Veja abaixo o código todo sem o javascript e só com HTML:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
</head>

<body>

<form id="FormCurriculum">

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="nome">Nome</label> <br />

                            <input type="text" id="nome" class="form-control" />

                            <div class="collapse" id="erronomecurriculum" name="erronomecurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>

                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="curremail">E-mail</label> <br />

                            <input type="text" id="curremail" class="form-control" />

                            <div class="collapse" id="vazioemailcurriculum" name="vazioemailcurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>

                            <div class="collapse" id="erroemailcurriculum" name="erroemailcurriculum">

                                <p style="color: red;"> Insira um e-mail válido</p>

                            </div>

                        </div>

                        <div class="col-sm-12 col-md-12 col-lg-12 form-group">

                            <label for="curriculum2">Copie e cole seu currículo aqui :</label> <br />

                            <textarea class="form-control" id="curriculum2" name="curriculum2" rows="7"></textarea>

                            <div class="collapse" id="errocurriculum" name="errocurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>
   
                        </div>

                         <br />

                         <div class="col-sm-12 col-md-12 col-lg-12 form-group">


                            <input type="checkbox" name="lgpd" value="De Acordo" id="lgpd" required="required" class="ui-state-error h5-active"> Eu li, estou ciente das condições de tratamento dos meus dados pessoais e dou meu consentimento, quando aplicável, conforme descrito nesta <a href="#" style="color:#ad033b" target="_blank">Política de Privacidade</a>.
                            <br>
                            <div class="collapse" id="errocurriculum" name="errocurriculum">

                                <p style="color: red;"> Campo obrigatório</p>

                            </div>
   
                        </div>

                            
                        <div>



                            <input type="submit" value="Enviar" id="TrabalheEnviar" class="btn-form">

                            <input type="reset" value="Apagar Campos" class="btn-form">

                        </div>

                    </form>

 

</body>
</html>

Talvez assim fosse mais fácil, o próprio HTML impede o envio do formulário caso o checkbox não tenha sido marcado.

Abraços.

LucasRodriguesBorges · 24 de fevereiro de 2021

@Marcelo Calazans, bom dia, Marcelo!

Tudo bem?

Mesmo só HTML, ele continua enviando o formulário, poderia me ajuda novamente?

Obrigado.

Marcelo Calazans · 24 de fevereiro de 2021

@LucasRodriguesBorges

Para ter a ideia do que tem que alterar no seu código para que a consistência do checkbox possa funcionar, precisaria ver a parte do código que recebe os dados dos inputs.

Vendo isso, talvez eu pudesse ajudar mais.

Abraços colega.