Estou fazendo a validação do formulário e estava tudo funcionando, mas ao inserir o campo idade, o checkbox começou a passar direto sem validar. Pois se eu não preencher nenhum checkbox o js deveria retornar uma mensagem com o alert. Vou postar o código. Se alguém puder me ajudar a achar o erro.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Cadastro de Hobbies</title><style>.borda{border:thinsolid#000;}</style><scriptlanguage="javascript">functionvalida_end(form){varpadrao=/[a-z]+\s+[a-z]+/gi;vartext=document.getElementById('txt_nome');if(!padrao.test(text.value)){alert("Digite Nome e Sobrenome");form.txt_nome.focus();returnfalse;}if(form.txt_endereco.value==""||form.txt_endereco.value.length<2){alert("Preencha o endereço corretamente.");form.txt_endereco.focus();returnfalse;}if(form.rdo_sexo[0].checked==false&&form.rdo_sexo[1].checked==false){alert("Selecione o sexo.");returnfalse;}if(form.txt_idade.value==""){alert("Preencha a Idade Corretamente.");form.txt_idade.focus();returnfalse;}if(isNaN(form.txt_idade.value)){alert("Preencha Com Números Inteiros.");form.txt_idade.focus();returnfalse;}elseif((form.txt_idade.value<3||form.txt_idade.value>149)){alert("Insira Uma Idade Maior que 2 e Inferior a 150.");form.txt_idade.focus();returnfalse;}if(form.chk_hobbies[1].checked==false&&form.chk_hobbies[2].checked==false&&form.chk_hobbies[3].checked==false&&form.chk_hobbies[4].checked==false&&form.chk_hobbies[5].checked==false&&form.chk_hobbies[6].checked==false&&form.chk_hobbies[7].checked==false&&form.chk_hobbies[8].checked==false){alert("Selecione os Hobbies.");returnfalse;}varpadrao2=/[a-z]+\s+[a-z]+/gi;vartext=document.getElementById('txa_comentario');if(!padrao2.test(text.value)){alert("Comente um pouco sobre você!");form.txa_comentario.focus();returnfalse;}}</script></head><body><formname="frmhobbie"onsubmit=" return valida_end(this)"method="post"action=""><formname="frmhobbie"method="post"action=""><tablewidth="366"align="left"class="borda"cellpadding="0"cellspacing="0"border="1"><tr><tdwidth="121"><labelfor="txt_nome">Nome</label></td><tdwidth="194"><inputtype="text"name="txt_nome"id="txt_nome"valeu=""/></td></tr><tr><td><labelfor="txt_endereco">Endereço</label></td><td><inputtype="text"name="txt_endereco"id="txt_endereco"value=""/></td></tr><tr><td><labelfor="rdo_sexo_0">Sexo</label></td><td><p><label><inputtype="radio"name="rdo_sexo"value="M"id="rdo_sexo_0"/>
Masculino</label><br/><label><inputtype="radio"name="rdo_sexo"value="F"id="rdo_sexo_1"/>
Feminino</label><br/></p></td></tr><tr><td><labelfor="slt_civil">Estado Civil</label></td><td><selectname="slt_civil"id="slt_civil"><optionvalue="">--------------------------</option><optionvalue="S">Solteiro(a)</option><optionvalue="C">Casado(a)</option><optionvalue="V">Viúvo(a)</option><optionvalue="D">Divorciado(a)</option><optionvalue="J">Separado(a) judicialmente </option></select></td></tr><tr><td><labelfor="txt_idade">Data de Nascimento</label></td><td><inputtype="text"name="txt_idade"id="txt_idade"value=""maxlength="10"size="12"/></td></tr><tr><tdcolspan="2">Hobbies</td></tr><tr><tdcolspan="2"><tablewidth="100%"><tr><td><label><inputtype="checkbox"name="chk_hobbies[]"value="1"id="chk_hobbies_0"/>
Esporte</label></td><td><label><inputtype="checkbox"name="chk_hobbies[]"value="2"id="chk_hobbies_1"/>
Jardinagem</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies[]"value="3"id="chk_hobbies_2"/>
Pintura</label></td><td><label><inputtype="checkbox"name="chk_hobbies[]"value="4"id="chk_hobbies_3"/>
Corte & Custura</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies[]"value="5"id="chk_hobbies_4"/>
Musica</label></td><td><label><inputtype="checkbox"name="chk_hobbies[]"value="6"id="chk_hobbies_5"/>
Meditação</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies[]"value="7"id="chk_hobbies_6"/>
Leitura</label></td><td><label><inputtype="checkbox"name="chk_hobbies[]"value="8"id="chk_hobbies_7"/>
Jogos Eletrônicos</label></td></tr><tr><tdcolspan="2"align="center"><inputtype="button"name="btn_addhoobies"id="btn_addhoobies"value="Adicionar Hobbies"/></td></tr></table></td></tr><tr><tdcolspan="2"><labelfor="txa_comentario">Comente um pouco sobre você</label></td></tr><tr><tdcolspan="2"><textarearows="5"cols="50"name="txa_comentario"id="txa_comentario"></textarea></td></tr><tr><tdcolspan="2"align="center"><inputtype="submit"name="sbm_enviar"id="sbm_enviar"value="Enviar"/> <inputtype="reset"name="rst_limpar"id="rst_limpar"value="Limpar"/></td></tr></table></form></body></html>
Ainda tenho mais validações para inserir, e tenho que fazer o mesmo com php, por isso preciso achar o erro. Estou a três dias tentando e nada.
Quando eu retiro as funções do checkbok aí tudo funciona certinho.
Primeiro, o nome dos checkboxes estava errados vc nao precisa “[]”, segundo que no javascript, quando vc pega cara checkbox pra testar se checked == false, vc comeca do indice 1 e o correto eh 0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Cadastro de Hobbies</title><style>.borda{border:thinsolid#000;}</style><scriptlanguage="javascript">functionvalida_end(form){varpadrao=/[a-z]+\s+[a-z]+/gi;vartext=document.getElementById('txt_nome');if(!padrao.test(text.value)){alert("Digite Nome e Sobrenome");form.txt_nome.focus();returnfalse;}if(form.txt_endereco.value==""||form.txt_endereco.value.length<2){alert("Preencha o endereço corretamente.");form.txt_endereco.focus();returnfalse;}if(form.rdo_sexo[0].checked==false&&form.rdo_sexo[1].checked==false){alert("Selecione o sexo.");returnfalse;}if(form.txt_idade.value==""){alert("Preencha a Idade Corretamente.");form.txt_idade.focus();returnfalse;}if(isNaN(form.txt_idade.value)){alert("Preencha Com Números Inteiros.");form.txt_idade.focus();returnfalse;}elseif((form.txt_idade.value<3||form.txt_idade.value>149)){alert("Insira Uma Idade Maior que 2 e Inferior a 150.");form.txt_idade.focus();returnfalse;}if(form.chk_hobbies[0].checked==false&&form.chk_hobbies[1].checked==false&&form.chk_hobbies[2].checked==false&&form.chk_hobbies[3].checked==false&&form.chk_hobbies[4].checked==false&&form.chk_hobbies[5].checked==false&&form.chk_hobbies[6].checked==false&&form.chk_hobbies[7].checked==false){alert("Selecione os Hobbies.");returnfalse;}varpadrao2=/[a-z]+\s+[a-z]+/gi;vartext=document.getElementById('txa_comentario');if(!padrao2.test(text.value)){alert("Comente um pouco sobre você!");form.txa_comentario.focus();returnfalse;}}</script></head><body><formname="frmhobbie"onsubmit=" return valida_end(this)"method="post"action=""><formname="frmhobbie"method="post"action=""><tablewidth="366"align="left"class="borda"cellpadding="0"cellspacing="0"border="1"><tr><tdwidth="121"><labelfor="txt_nome">Nome</label></td><tdwidth="194"><inputtype="text"name="txt_nome"id="txt_nome"valeu=""/></td></tr><tr><td><labelfor="txt_endereco">Endereço</label></td><td><inputtype="text"name="txt_endereco"id="txt_endereco"value=""/></td></tr><tr><td><labelfor="rdo_sexo_0">Sexo</label></td><td><p><label><inputtype="radio"name="rdo_sexo"value="M"id="rdo_sexo_0"/>
Masculino</label><br/><label><inputtype="radio"name="rdo_sexo"value="F"id="rdo_sexo_1"/>
Feminino</label><br/></p></td></tr><tr><td><labelfor="slt_civil">Estado Civil</label></td><td><selectname="slt_civil"id="slt_civil"><optionvalue="">--------------------------</option><optionvalue="S">Solteiro(a)</option><optionvalue="C">Casado(a)</option><optionvalue="V">Viúvo(a)</option><optionvalue="D">Divorciado(a)</option><optionvalue="J">Separado(a) judicialmente </option></select></td></tr><tr><td><labelfor="txt_idade">Data de Nascimento</label></td><td><inputtype="text"name="txt_idade"id="txt_idade"value=""maxlength="10"size="12"/></td></tr><tr><tdcolspan="2">Hobbies</td></tr><tr><tdcolspan="2"><tablewidth="100%"><tr><td><label><inputtype="checkbox"name="chk_hobbies"value="1"id="chk_hobbies_0"/>
Esporte</label></td><td><label><inputtype="checkbox"name="chk_hobbies"value="2"id="chk_hobbies_1"/>
Jardinagem</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies"value="3"id="chk_hobbies_2"/>
Pintura</label></td><td><label><inputtype="checkbox"name="chk_hobbies"value="4"id="chk_hobbies_3"/>
Corte & Custura</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies"value="5"id="chk_hobbies_4"/>
Musica</label></td><td><label><inputtype="checkbox"name="chk_hobbies"value="6"id="chk_hobbies_5"/>
Meditação</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies"value="7"id="chk_hobbies_6"/>
Leitura</label></td><td><label><inputtype="checkbox"name="chk_hobbies"value="8"id="chk_hobbies_7"/>
Jogos Eletrônicos</label></td></tr><tr><tdcolspan="2"align="center"><inputtype="button"name="btn_addhoobies"id="btn_addhoobies"value="Adicionar Hobbies"/></td></tr></table></td></tr><tr><tdcolspan="2"><labelfor="txa_comentario">Comente um pouco sobre você</label></td></tr><tr><tdcolspan="2"><textarearows="5"cols="50"name="txa_comentario"id="txa_comentario"></textarea></td></tr><tr><tdcolspan="2"align="center"><inputtype="submit"name="sbm_enviar"id="sbm_enviar"value="Enviar"/><inputtype="reset"name="rst_limpar"id="rst_limpar"value="Limpar"/></td></tr></table></form></body></html>
PS: Arruma, o seu codigo, coloca javascript eh um arquivo separado, funcao de validacao nao deveria mostrar mensagens de error, alerts e nada disso, deveria somente retornar, se os dados sao validos ou nao.
//Daniel
G
grinche
Acho muito interessante você pensar em utilizar uma biblioteca javascript em seus projetos.
Utilizei JQuery no código abaixo, veja o quanto o código fica simples.
E JQuery hoje é utilizado pela maioria dos desenvolvedores web então seu código se torna de facil manutenção.
varcheckBoxMarcados=$("input:checkbox").is(':checked').size();if(checkBoxMarcados==0){alert("Selecione os Hobbies.");}
therodrigoagostin
Vou te dar uma dica que talvez tenha necessidade de você alterar algumas coisas no seu projeto, porém o resultado é muito bom!
Utilize ou Twitter Bootstrap ou Primefaces.
Até!
Kuster_01:
Estou fazendo a validação do formulário e estava tudo funcionando, mas ao inserir o campo idade, o checkbox começou a passar direto sem validar. Pois se eu não preencher nenhum checkbox o js deveria retornar uma mensagem com o alert. Vou postar o código. Se alguém puder me ajudar a achar o erro.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Cadastro de Hobbies</title><style>.borda{border:thinsolid#000;}</style><scriptlanguage="javascript">functionvalida_end(form){varpadrao=/[a-z]+\s+[a-z]+/gi;vartext=document.getElementById('txt_nome');if(!padrao.test(text.value)){alert("Digite Nome e Sobrenome");form.txt_nome.focus();returnfalse;}if(form.txt_endereco.value==""||form.txt_endereco.value.length<2){alert("Preencha o endereço corretamente.");form.txt_endereco.focus();returnfalse;}if(form.rdo_sexo[0].checked==false&&form.rdo_sexo[1].checked==false){alert("Selecione o sexo.");returnfalse;}if(form.txt_idade.value==""){alert("Preencha a Idade Corretamente.");form.txt_idade.focus();returnfalse;}if(isNaN(form.txt_idade.value)){alert("Preencha Com Números Inteiros.");form.txt_idade.focus();returnfalse;}elseif((form.txt_idade.value<3||form.txt_idade.value>149)){alert("Insira Uma Idade Maior que 2 e Inferior a 150.");form.txt_idade.focus();returnfalse;}if(form.chk_hobbies[1].checked==false&&form.chk_hobbies[2].checked==false&&form.chk_hobbies[3].checked==false&&form.chk_hobbies[4].checked==false&&form.chk_hobbies[5].checked==false&&form.chk_hobbies[6].checked==false&&form.chk_hobbies[7].checked==false&&form.chk_hobbies[8].checked==false){alert("Selecione os Hobbies.");returnfalse;}varpadrao2=/[a-z]+\s+[a-z]+/gi;vartext=document.getElementById('txa_comentario');if(!padrao2.test(text.value)){alert("Comente um pouco sobre você!");form.txa_comentario.focus();returnfalse;}}</script></head><body><formname="frmhobbie"onsubmit=" return valida_end(this)"method="post"action=""><formname="frmhobbie"method="post"action=""><tablewidth="366"align="left"class="borda"cellpadding="0"cellspacing="0"border="1"><tr><tdwidth="121"><labelfor="txt_nome">Nome</label></td><tdwidth="194"><inputtype="text"name="txt_nome"id="txt_nome"valeu=""/></td></tr><tr><td><labelfor="txt_endereco">Endereço</label></td><td><inputtype="text"name="txt_endereco"id="txt_endereco"value=""/></td></tr><tr><td><labelfor="rdo_sexo_0">Sexo</label></td><td><p><label><inputtype="radio"name="rdo_sexo"value="M"id="rdo_sexo_0"/>
Masculino</label><br/><label><inputtype="radio"name="rdo_sexo"value="F"id="rdo_sexo_1"/>
Feminino</label><br/></p></td></tr><tr><td><labelfor="slt_civil">Estado Civil</label></td><td><selectname="slt_civil"id="slt_civil"><optionvalue="">--------------------------</option><optionvalue="S">Solteiro(a)</option><optionvalue="C">Casado(a)</option><optionvalue="V">Viúvo(a)</option><optionvalue="D">Divorciado(a)</option><optionvalue="J">Separado(a) judicialmente </option></select></td></tr><tr><td><labelfor="txt_idade">Data de Nascimento</label></td><td><inputtype="text"name="txt_idade"id="txt_idade"value=""maxlength="10"size="12"/></td></tr><tr><tdcolspan="2">Hobbies</td></tr><tr><tdcolspan="2"><tablewidth="100%"><tr><td><label><inputtype="checkbox"name="chk_hobbies[]"value="1"id="chk_hobbies_0"/>
Esporte</label></td><td><label><inputtype="checkbox"name="chk_hobbies[]"value="2"id="chk_hobbies_1"/>
Jardinagem</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies[]"value="3"id="chk_hobbies_2"/>
Pintura</label></td><td><label><inputtype="checkbox"name="chk_hobbies[]"value="4"id="chk_hobbies_3"/>
Corte & Custura</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies[]"value="5"id="chk_hobbies_4"/>
Musica</label></td><td><label><inputtype="checkbox"name="chk_hobbies[]"value="6"id="chk_hobbies_5"/>
Meditação</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies[]"value="7"id="chk_hobbies_6"/>
Leitura</label></td><td><label><inputtype="checkbox"name="chk_hobbies[]"value="8"id="chk_hobbies_7"/>
Jogos Eletrônicos</label></td></tr><tr><tdcolspan="2"align="center"><inputtype="button"name="btn_addhoobies"id="btn_addhoobies"value="Adicionar Hobbies"/></td></tr></table></td></tr><tr><tdcolspan="2"><labelfor="txa_comentario">Comente um pouco sobre você</label></td></tr><tr><tdcolspan="2"><textarearows="5"cols="50"name="txa_comentario"id="txa_comentario"></textarea></td></tr><tr><tdcolspan="2"align="center"><inputtype="submit"name="sbm_enviar"id="sbm_enviar"value="Enviar"/> <inputtype="reset"name="rst_limpar"id="rst_limpar"value="Limpar"/></td></tr></table></form></body></html>
Ainda tenho mais validações para inserir, e tenho que fazer o mesmo com php, por isso preciso achar o erro. Estou a três dias tentando e nada.
Quando eu retiro as funções do checkbok aí tudo funciona certinho.
Kuster_01
Primeiramente obrigado por acertar o código. Mas tenho mais uma pergunta: É possível fazer essas validações do checkbox com javascript utilizando os colchetes como estava no código?
windsofhell:
Arrumei o codigo para voce.
Primeiro, o nome dos checkboxes estava errados vc nao precisa “[]”, segundo que no javascript, quando vc pega cara checkbox pra testar se checked == false, vc comeca do indice 1 e o correto eh 0.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><title>Cadastro de Hobbies</title><style>.borda{border:thinsolid#000;}</style><scriptlanguage="javascript">functionvalida_end(form){varpadrao=/[a-z]+\s+[a-z]+/gi;vartext=document.getElementById('txt_nome');if(!padrao.test(text.value)){alert("Digite Nome e Sobrenome");form.txt_nome.focus();returnfalse;}if(form.txt_endereco.value==""||form.txt_endereco.value.length<2){alert("Preencha o endereço corretamente.");form.txt_endereco.focus();returnfalse;}if(form.rdo_sexo[0].checked==false&&form.rdo_sexo[1].checked==false){alert("Selecione o sexo.");returnfalse;}if(form.txt_idade.value==""){alert("Preencha a Idade Corretamente.");form.txt_idade.focus();returnfalse;}if(isNaN(form.txt_idade.value)){alert("Preencha Com Números Inteiros.");form.txt_idade.focus();returnfalse;}elseif((form.txt_idade.value<3||form.txt_idade.value>149)){alert("Insira Uma Idade Maior que 2 e Inferior a 150.");form.txt_idade.focus();returnfalse;}if(form.chk_hobbies[0].checked==false&&form.chk_hobbies[1].checked==false&&form.chk_hobbies[2].checked==false&&form.chk_hobbies[3].checked==false&&form.chk_hobbies[4].checked==false&&form.chk_hobbies[5].checked==false&&form.chk_hobbies[6].checked==false&&form.chk_hobbies[7].checked==false){alert("Selecione os Hobbies.");returnfalse;}varpadrao2=/[a-z]+\s+[a-z]+/gi;vartext=document.getElementById('txa_comentario');if(!padrao2.test(text.value)){alert("Comente um pouco sobre você!");form.txa_comentario.focus();returnfalse;}}</script></head><body><formname="frmhobbie"onsubmit=" return valida_end(this)"method="post"action=""><formname="frmhobbie"method="post"action=""><tablewidth="366"align="left"class="borda"cellpadding="0"cellspacing="0"border="1"><tr><tdwidth="121"><labelfor="txt_nome">Nome</label></td><tdwidth="194"><inputtype="text"name="txt_nome"id="txt_nome"valeu=""/></td></tr><tr><td><labelfor="txt_endereco">Endereço</label></td><td><inputtype="text"name="txt_endereco"id="txt_endereco"value=""/></td></tr><tr><td><labelfor="rdo_sexo_0">Sexo</label></td><td><p><label><inputtype="radio"name="rdo_sexo"value="M"id="rdo_sexo_0"/>
Masculino</label><br/><label><inputtype="radio"name="rdo_sexo"value="F"id="rdo_sexo_1"/>
Feminino</label><br/></p></td></tr><tr><td><labelfor="slt_civil">Estado Civil</label></td><td><selectname="slt_civil"id="slt_civil"><optionvalue="">--------------------------</option><optionvalue="S">Solteiro(a)</option><optionvalue="C">Casado(a)</option><optionvalue="V">Viúvo(a)</option><optionvalue="D">Divorciado(a)</option><optionvalue="J">Separado(a) judicialmente </option></select></td></tr><tr><td><labelfor="txt_idade">Data de Nascimento</label></td><td><inputtype="text"name="txt_idade"id="txt_idade"value=""maxlength="10"size="12"/></td></tr><tr><tdcolspan="2">Hobbies</td></tr><tr><tdcolspan="2"><tablewidth="100%"><tr><td><label><inputtype="checkbox"name="chk_hobbies"value="1"id="chk_hobbies_0"/>
Esporte</label></td><td><label><inputtype="checkbox"name="chk_hobbies"value="2"id="chk_hobbies_1"/>
Jardinagem</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies"value="3"id="chk_hobbies_2"/>
Pintura</label></td><td><label><inputtype="checkbox"name="chk_hobbies"value="4"id="chk_hobbies_3"/>
Corte & Custura</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies"value="5"id="chk_hobbies_4"/>
Musica</label></td><td><label><inputtype="checkbox"name="chk_hobbies"value="6"id="chk_hobbies_5"/>
Meditação</label></td></tr><tr><td><label><inputtype="checkbox"name="chk_hobbies"value="7"id="chk_hobbies_6"/>
Leitura</label></td><td><label><inputtype="checkbox"name="chk_hobbies"value="8"id="chk_hobbies_7"/>
Jogos Eletrônicos</label></td></tr><tr><tdcolspan="2"align="center"><inputtype="button"name="btn_addhoobies"id="btn_addhoobies"value="Adicionar Hobbies"/></td></tr></table></td></tr><tr><tdcolspan="2"><labelfor="txa_comentario">Comente um pouco sobre você</label></td></tr><tr><tdcolspan="2"><textarearows="5"cols="50"name="txa_comentario"id="txa_comentario"></textarea></td></tr><tr><tdcolspan="2"align="center"><inputtype="submit"name="sbm_enviar"id="sbm_enviar"value="Enviar"/><inputtype="reset"name="rst_limpar"id="rst_limpar"value="Limpar"/></td></tr></table></form></body></html>
PS: Arruma, o seu codigo, coloca javascript eh um arquivo separado, funcao de validacao nao deveria mostrar mensagens de error, alerts e nada disso, deveria somente retornar, se os dados sao validos ou nao.