0

Isso vai ser meio complicado para explicar mas acredito que vocês irão conseguir me ajudar. Estou tendo problemas para validar um formulário onde tem alguns campos ocultos no meio.

Neste formulário há um Select "Temas" que ao selecionar uma opção deste Select ele abre outro select abaixo dele, porém ao adicionar a função para validar esta opção que abre abaixo dele da problema, porque da problema ?

Vou colocar uma exemplo aqui do teste que fiz, há neste formulário cerca de 4 Opções ocultas, entre elas "infantil, casamento, chabebe" se eu seleciono a opção casamento a função de validar o formulário vai dar o alerta da opção Infantil.

Vou postar abaixo o código do formulário e dos JavaScripts que uso para validar o formulário e para ocultar e mostrar os campos ocultos.

HTML:

<form action="envia.php" method="post" id="form1">
  <p><strong>Dados Pessoais:</strong></p>
  <input type="text" name="nome" id="nome" class="name" value="Nome*" onFocus="if(this.value =='Nome*' ) this.value=''" onBlur="if(this.value=='') this.value='Nome*'">
  <input type="text" name="email" id="email" class="email" value="Email*" onFocus="if(this.value =='Email*' ) this.value=''" onBlur="if(this.value=='') this.value='Email*'">
  <input type="text" name="ddd" id="ddd" class="ddd" value="DDD*" onFocus="if(this.value =='DDD*' ) this.value=''" onBlur="if(this.value=='') this.value='DDD*'" maxlength="3">
  <input type="text" name="telefone" id="telefone" class="telefone" value="Telefone*" onFocus="if(this.value =='Telefone*' ) this.value=''" onBlur="if(this.value=='') this.value='Telefone*'" maxlength="9">
  <p><strong>Escolha um Tema:</strong></p>
  <select name="temas" id="temas" class="temas">
    <option selected value="Temas Disponíveis*">Temas Disponíveis*</option>
    <option data-section="infantil" value="Decoração Festa Infantil">Decoração Festa Infantil</option>
    <option value="Decoração Festa 15 Anos">Decoração Festa 15 Anos</option>
    <option value="Decoração Para Noivado">Decoração Para Noivado</option>
    <option data-section="casamento" value="Decoração Para Casamento">Decoração Para Casamento</option>
    <option value="Decoração Para Bodas">Decoração Para Bodas</option>
    <option data-section="chabebe" value="Decoração Para Chá de Bebê">Decoração Para Chá de Bebê</option>
    <option value="Decoração Para Chá de Cozinha">Decoração Para Chá de Cozinha</option>
    <option value="Decoração Para Chá de Lingerie">Decoração Para Chá de Lingerie</option>
    <option value="Decoração Para Formatura">Decoração Para Formatura</option>
    <option value="Decoração Para Eventos">Decoração Para Eventos</option>
    <option value="Kits Provençais">Kits Provençais</option>
  </select>
  <div data-name="infantil" class="hide">
    <select name="infantil" id="infantil" class="infantil">
      <option selected value="">Selecione um Tema Abaixo</option>
      <option value="Minnie Vermelha">Minnie Vermelha</option>
      <option value="Minnie Rosa">Minnie Rosa</option>
      <option value="Homem Aranha">Homem Aranha</option>
      <option value="Frozen">Frozen</option>
      <option value="Carros Disney">Carros Disney</option>
      <option value="Galinha Pintadinha">Galinha Pintadinha</option>
      <option value="Princesa Ursa">Princesa Ursa</option>
      <option value="Príncipe Urso">Príncipe Urso</option>
      <option value="A Bela e a Fera">A Bela e a Fera</option>
      <option value="Circo">Circo</option>
      <option value="Minions">Minions</option>
      <option value="Outros">Outros</option>
    </select>
  </div>
  <div data-name="casamento" class="hide">
    <select name="casamento" id="casamento" class="casamento">
      <option selected value="">Selecione um Tema Abaixo</option>
      <option value="Mesa do Bolo">Mesa do Bolo</option>
      <option value="Corredor de Cerimônia">Corredor de Cerimônia</option>
      <option value="Completo Mesa do Bolo e Corredor de Cerimônia">Completo Mesa do Bolo e Corredor de Cerimônia</option>
    </select>
    <input type="text" name="n-convidados" id="n-convidados" class="n-convidados" value="N° de Convidados" onFocus="if(this.value =='N° de Convidados' ) this.value=''" onBlur="if(this.value=='') this.value='N° de Convidados'" maxlength="7">
  </div>
  <div data-name="chabebe" class="hide">
    <select name="chabebe" id="chabebe" class="chabebe">
      <option selected value="">Selecione um Tema Abaixo</option>
      <option value="Tema Menina">Tema Menina</option>
      <option value="Tema Menino">Tema Menino</option>
      <option value="Tema Revelação">Tema Revelação</option>
    </select>
  </div>
</form>

JavaScript que valida o Formulário:

function validaform(form1){
    if(form1.nome.value == 'Nome*'){
        alert("O Campo Nome é Obrigatório!");
        return false;
    }
    if(form1.email.value == 'Email*'){
        alert("O Campo Email é Obrigatório!");
        return false;
    }
    if(form1.email.value.indexOf(('@' && '.'),0)== -1){
        alert("Email Inválido.");
        return false;
    }
    if(form1.ddd.value == 'DDD*'){
        alert("O Campo DDD é Obrigatório!");
        return false;
    }
    if (isNaN(form1.ddd.value)){
        alert ("O Campo DDD Deve Conter Apenas Números!");
        form1.ddd.focus();
        return false;
    }
    if(form1.telefone.value == 'Telefone*'){
        alert("O Campo Telefone é Obrigatório!");
        return false;
    }
    if (isNaN(form1.telefone.value)){
        alert ("O Campo Telefone Deve Conter Apenas Números!");
        form1.telefone.focus();
        return false;
    }
    if(form1.temas.value == 'Temas Disponíveis*'){
        alert("O Campo Temas Disponíveis é Obrigatório!");
        return false;
    }
    if(form1.infantil.value == ''){
        alert("Selecione um Tema Infantil!");
        return false;
    }
    if(form1.casamento.value == ''){
        alert("Selecione um Tema de Casamento!");
        return false;
    }
    if(form1.chabebe.value == ''){
        alert("Selecione um Tema do Chá de Bebê!");
        return false;
    }
    return true;
}

JavaScript que faz com que deixe oculto os Campos:

var selectTemas = document.getElementById('temas');
var hidden = ['infantil', 'casamento', 'chabebe'].map(function(dataName){
    return document.querySelector('div[data-name="'+dataName+'"]')
});

selectTemas.addEventListener('change', function () {
    var selected = this.options[this.selectedIndex].dataset.section;
    hidden.forEach(function(select){
        select.classList[selected == select.dataset.name ? 'add' : 'remove']('active');
    });
});

Se quiserem dar uma olhada no Formulário postado no Site que estou arrumando, ele só não está com a função de validar os campos ocultos pois não consegui terminar por conta deste problema que falei acima.

Site: http://www.adornardecoracoes.com.br/contatodecoracoes.html

2
  • você quer fazer uma validação de seleções para os drops dinâmicos? Commented 5/04/2016 às 15:12
  • Isso mesmo, não sei se você conseguiu entender muito bem pois ficou meio longa a pergunta, mas é isso, tenho alguns campos dinâmicos que queria validá-los porém ao adicionar da forma que coloquei da erro na hora de validar os mesmos. Commented 5/04/2016 às 15:20

1 Resposta 1

1

você pode verificar se a div pai possui a classe hide:

substitua:

function validaform(form1){
  /* demais validações */
  if(form1.infantil.value == ''){
    alert("Selecione um Tema Infantil!");
    return false;
  }
  if(form1.casamento.value == ''){
    alert("Selecione um Tema de Casamento!");
    return false;
  }
  if(form1.chabebe.value == ''){
    alert("Selecione um Tema do Chá de Bebê!");
    return false;
  }
  return true;
}

pelo o seguinte:

function validaform(form1){
  /* demais validações */
  var validaSelect = function (elem) {
    return elem.parentElement.classList.contains("hide") || elem.value != '';
  }

  if(!validaSelect(form1.infantil)){
    alert("Selecione um Tema Infantil!");
    return false;
  }
  if(!validaSelect(form1.casamento)){
    alert("Selecione um Tema de Casamento!");
    return false;
  }
  if(!validaSelect(form1.chabebe)){
    alert("Selecione um Tema do Chá de Bebê!");
    return false;
  }
  return true;
}

só uma dica, no lugar disto:

select.classList[selected == select.dataset.name ? 'add' : 'remove']('active')

você pode usar o toggle da seguinte forma:

select.classList.toggle('active', selected == select.dataset.name)

e para retornar todas as divs com data-name:

var hidden = [].slice.call(document.querySelectorAll('div[data-name]'))
6
  • Neste caso devo adicionar este código junto ao último JavaScript que adicionei ? Ou junto ao JavaScript que Valida o Formulário ? Commented 5/04/2016 às 15:23
  • @RodrigoMacedo, e só substituir as respectivas validações no validaForm(form1) pelas validações sugeridas. Commented 5/04/2016 às 15:25
  • Gostei da dica que sugeriu acima, editei o JavaScript responsável por ocultar e mostrar os Campos ocultos e continuou funcionando perfeitamente. Farei o que sugeriu agora com o que valida o Formulário. Commented 5/04/2016 às 15:28
  • Adicionei o código que me informou no meio do JavaScript que valida o formulário, logo abaixo da opção que valida o campo "Temas" e não funcionou, ele pula para a próxima parte, que valida o próximo campo do formulário. Commented 5/04/2016 às 15:37
  • @RodrigoMacedo, modifiquei a resposta para tentar tornar mais claro o que acho que precisa ser feito. Commented 5/04/2016 às 16:17

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .