Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jvi37

Validação de um checkbox com textfield obrigatório

Por , em Javascript

Recommended Posts

jvi37    0

jvi37
Postado

Olá galera estou começando em Javascript e preciso de uma ajuda para validação de um formulário, onde vários checkbox existem com variados assuntos mas especificamente existe um checkbox onde nãos estão listados nenhum assunto que é o checkbox "Outros" e com um textfield que obrigue o usuário a prrencher que outros são esse e com no mínimo duas palavras. Estou colocando o código de como já está o formulário:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd [/url]">
<html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml [/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
<!--
//função para validar checkbox
function checkTheBox() {
    var flag = 0;
            for (var i = 0; i< 5; i++) {
            if(document.frm["chk_hobbies[]"][i].checked){
            flag ++;
            }
            }
            if (flag != 1) {
            alert ("Você deve marcar um hobbie!");
        return false;
        }
    return true;
}
//função para aceitar somente números
function numeros(v)

{
   var ValidChars = "0123456789";
   var numeros=true;
   var Char;

 
   for (i = 0; i < v.length && numeros == true; i++)
      {
      Char = v.charAt(i);
      if (ValidChars.indexOf(Char) == -1)
         {
         numeros = false;
         }
      }
   return numeros;
   
}


function validaForm(frm) {
// O paramêtro frm desta função significa: this.form,
//pois a chamada da função - validaForm(this), foi setada na tag form.

// Vamos verificar se o campo nome foi preenchido e se ele contém no mínio três caracteres.
if(frm.txt_nome.value == "" || frm.txt_nome.value == null ||
frm.txt_nome.value.length < 3) {
 // Exibiremos um alerta, caso o campo esteja vazio.
 alert("Por favor, informe o seu nome.");
 // Vamos setar um focus no campo.
 frm.txt_nome.focus();
 // Bloqueando o envio do form.
 return false;
}

if(frm.txt_endereco.value == "" || frm.txt_endereco.value == null ||
frm.txt_endereco.value.length < 3) {
 // Exibiremos um alerta, caso o campo esteja vazio.
 alert("Por favor, informe o seu endereço.");
 // Vamos setar um focus no campo.
 frm.txt_endereco.focus();
 // Bloqueando o envio do form.
 return false;
}

// O usuário precisa selecionar um dos dois radio buttons - Masculino ou Feminio.
escolhaSexo = -1; // Um valor negativo default (padrão) que significa que nada foi escolhido ainda.
// Um loop entre os radios button com o mesmo nome: sexo. Veja a lógica.
// x = frm.sexo.length -1 é a mesma coia que: x = 2 - 1, que resultaria em 1.
// x > -1 significa que o valor de x não pode ser igual a -1 e sim maior, pq -1 significa que nada foi escolhido.
// x-- um decremento do valor x, seria algo como: x = 1, x = 0 e pára pois x não pode ser -1.

for (x = frm.rdo_sexo.length -1; x > -1; x--) {
 // checked quer dizer selecionado, então verifico se o primeiro (0) ou o segundo (1) radio foi selecionado (checked).

if(frm.rdo_sexo[x].checked) {
  // Seta o valor de x a variável escolhaSexo;
  escolhaSexo = x;
 }
}
// Se nenhuma das opçõs - Masculino ou Feminino forem escolhidas, exibo uma alerta e bloqueio o envio.

if(escolhaSexo == -1) {
 alert("Qual o seu sexo?");
 frm.sexo[0].focus();
 return false;
}

// Validar o estado civil; quero que o usuário escolha uma entre as cinco opções - Solteiro, Casado, Viuvo, Divorciado, Separado.
if(frm.slt_civil.value == "" || frm.slt_civil.value == "Todas") {
 alert("Indique seu estado civil:Solteiro, Casado, Viúvo, Divorciado, Separado");
 frm.slt_civil.focus();
 return false;
}
//Validar a idade
if (frm.txt_idade.value=="" || !numeros(frm.txt_idade.value)) {
alert("Preencha a idade corretamente.");
frm.txt_idade.focus();
return false;
}

// Validar a textarea
if(frm.txa_comentario.value == "" || frm.txa_comentario.value == null) {
 alert("Por favor, conte-nos um pouco sobre você.");
 frm.txa_comentario.focus();
 return false;
}

// Como tudo está correto, vamos permitir o envio do formulário.
alert('Obrigado por ter preenchido o formulário.');
return true;
}

//-->
</script>
</head>

<body>
<form name="frm" method="post" action="#" onsubmit="validaForm(this); return checkTheBox();">
<table width="309" align="left" class="borda" cellpadding="0" cellspacing="0" border="1">
    <tr>
      <td><label for="txt_nome">Nome</label></td>
    <td><input type="text" name="txt_nome" id="txt_nome" valeu=""/></td>
  </tr>
  <tr>
    <td><label for="txt_endereco">Endereço</label></td>
    <td><input type="text" name="txt_endereco" id="txt_endereco" value="" /></td>
  </tr>
  <tr>
    <td><label for="rdo_sexo_0">Sexo</label></td>
    <td><p>
      <label>
        <input type="radio" name="rdo_sexo" value="M" id="rdo_sexo_0" />
        Masculino</label>
      <br />
      <label>
        <input type="radio" name="rdo_sexo" value="F" id="rdo_sexo_1" />
        Feminino</label>
      <br />
    </p></td>
  </tr>
   <tr>
    <td><label for="slt_civil">Estado Civil</label></td>
    <td>
        <select name="slt_civil" id="slt_civil">
          <option value="">--------------------------</option>
          <option value="solteiro">Solteiro(a)</option>
          <option value="casado">Casado(a)</option>
          <option value="viuvo">Viúvo(a)</option>
          <option value="divorciado">Divorciado(a)</option>
          <option value="sepjudicialmente">Separado(a) judicialmente </option>
      </select>
    </td>
  </tr>
  <tr>
      <td><label for="txt_idade">Idade</label></td>
    <td><input type="text" name="txt_idade" id="txt_idade" value="" maxlength="3" size="4" /></td>
  </tr>
   
  <tr>
    <td colspan="2">Hobbies</td>
  </tr>
  <tr>
    <td colspan="2"><table width="100%">
      <tr>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="1" id="chk_hobbies_0" />
          Esporte</label></td>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="2" id="chk_hobbies_1" />
          Jardinagem</label></td>
      </tr>
      <tr>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="3" id="chk_hobbies_2" />
          Pintura</label></td>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="4" id="chk_hobbies_3" />
          Corte & Custura</label></td>
      </tr>
      <tr>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="5" id="chk_hobbies_4" />
          Musica</label></td>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="6" id="chk_hobbies_5" />
          Meditação</label></td>
      </tr>
      <tr>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="7" id="chk_hobbies_6" />
          Leitura</label></td>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="8" id="chk_hobbies_7" />
          Jogos Eletrônicos</label></td>
      </tr>
      <tr>
        <td><label>
          <input type="checkbox" name="chk_hobbies[]" value="9" id="chk_hobbies_8" />
          Outros</label></td>
          <td><label>Descreva: <input type="text" name="txt_outros" id="txt_outros" value="" /></label></td>
      </tr>
    </table></td>
  </tr>
   <tr>
    <td colspan="2"><label for="txa_comentario">Comente um pouco sobre você</label></td>
  </tr>
  <tr>
    <td colspan="2"><textarea rows="5" cols="50" name="txa_comentario" id="txa_comentario"></textarea></td>
  </tr>
   <tr>
      <td><input type="submit" name="sbt" value="Enviar" />
   </td>
    <br />
    </tr>
  </table>  
</form>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Snowden    94

Snowden
Postado

jQuery

$(function() {

if($('input[type="checkbox"]:checked').length == 0){
  alert('Selecione almenos 1 Hobbie!');
}else if($('#chk_hobbies_8').is(':checked') && jQuery.trim($('#txt_outros').val()) == ''){
	alert('Descreva seu Hobbie!');
	$('#txt_outros').focus();
}else{
	alert('Obrigado!');
}

});

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito