This will be kind of complicated to explain but I believe you will be able to help me. I'm having trouble validating a form where it has some hidden fields in the middle.
In this form there is a Select "Themes" that when selecting an option from this Select it opens another select below it, however when adding the function to validate this option it opens below it of the problem, why of the problem?
I will put an example here of the test I did, there are in this form about 4 Hidden options, among them "child, marriage, chabebe" if I select the option marriage the function of validate the form will give the alert of the option Child .
I'll post below the form code and the JavaScripts that I use to validate the form and to hide and show the hidden fields.
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 that validates the Form:
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 that causes it to hide the fields:
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');
});
});
If you want to take a look at the Form posted on the Site that I am arranging, it is not only validate the hidden fields because I could not finish because of this problem I mentioned above.
Website: link