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