Ir ao conteúdo
  • Cadastre-se

Javascript Campo checkbox Campo Obrigatório


Posts recomendados

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>

 

Link para o post
Compartilhar em outros sites

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

Link para o post
Compartilhar em outros sites
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.

Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisa ser um usuário para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda a ler resistores e capacitores

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!