Validação de Select

[eduardom 0]

Não possui muito conhecimento JavaScript.

 

Estou precisando/fazendo um formulário que ao selecionar o select da Unidade, mostrar outro select para selecionar o Departamento.

 

Consigo fazer a validação do select Unidade, mas o do Departamento, ele chega a mostrar a mensagem para selecionar o mesmo, mas não retorna e envia o formulário.

 

O que estou fazendo de errado?

 

Agradeço pela ajuda.

<script language="javascript">    
<!--	 	 	
 function validaForm(){	
	if (document.formContato.nome.value.length <= 6) {
		alert('Nome Completo: Preenchimento Obrigatório!');
		document.formContato.nome.focus();
		return false;
	}

	if (document.formContato.email.value.length <= 2) {
		alert('E-mail: Preenchimento Obrigatório!');
		document.formContato.email.focus();
		return false;
	}	 	 

	if (document.formContato.assunto.value.length <= 2) {
		alert('Assunto: Preenchimento Obrigatório!');
		document.formContato.assunto.focus();
		return false;
	}	 	
	
	if (document.formContato.unidade.value == "") {
		alert('Unidade: Seleção Obrigatória!');
		document.formContato.unidade.focus();
		return false;
	}	
	
	if (document.formContato.dp.value == "") {
		alert('Departamento: Seleção Obrigatória!');
		document.formContato.dp.focus();
		return false;
	}		

	if (document.formContato.mensagem.value.length <= 10) {
		alert('Mensagem: Preenchimento Obrigatório!');
		document.formContato.mensagem.focus();
		return false;
	}	 	

 return true;

 }	

 function checaemail(){
	if (document.formContato.email.value.indexOf('@') == -1 || document.formContato.email.value.indexOf('.') == -1){
		alert('E-mail Inválido!');
		document.formContato.email.value = ' ';	
		document.formContato.email.focus();
	}	 	 
}	  		  	

//-->
</script>


<script type="text/javascript">
<!--
 function optionCheck(){
    var option = document.getElementById("unidade").value;
    if(option == ""){
        document.getElementById("depart-unidade1").style.display ="none";
		document.getElementById("depart-unidade2").style.display ="none";
		document.getElementById("depart-faculdade").style.display ="none";
		document.getElementById("depart-conservatorio").style.display ="none";
    }
	
    if(option == "unidade1"){
        document.getElementById("depart-unidade1").style.display ="inline";
		document.getElementById("depart-unidade2").style.display ="none";
		document.getElementById("depart-faculdade").style.display ="none";
		document.getElementById("depart-conservatorio").style.display ="none";
    }
		
	if(option == "unidade2"){
        document.getElementById("depart-unidade2").style.display ="inline";
		document.getElementById("depart-unidade1").style.display ="none";
		document.getElementById("depart-faculdade").style.display ="none";
		document.getElementById("depart-conservatorio").style.display ="none";
    }
	
	if(option == "faculdade"){
        document.getElementById("depart-faculdade").style.display ="inline";
		document.getElementById("depart-unidade1").style.display ="none";
		document.getElementById("depart-unidade2").style.display ="none";
		document.getElementById("depart-conservatorio").style.display ="none";
    }
	
	if(option == "conservatorio"){
        document.getElementById("depart-conservatorio").style.display ="inline";
		document.getElementById("depart-unidade1").style.display ="none";
		document.getElementById("depart-unidade2").style.display ="none";
		document.getElementById("depart-faculdade").style.display ="none";
    }
	
 }
 //-->
</script>				

<form action="" id="formContato" name="formContato" method="post" onSubmit="return validaForm(this);">
	<input type="text" id="nome" name="nome" placeholder="Nome Completo">
	<input type="email" id="email" name="email" placeholder="E-mail">
	<input type="text" id="assunto" name="assunto" placeholder="Assunto">
	<select id="unidade" onchange="optionCheck()">
		<option value="" select="selected">Selecione a unidade</option>
		<option value="unidade1">Unidade 1</option>
		<option value="unidade2">Unidade 2</option>
		<option value="faculdade">Faculdade</option>
		<option value="conservatorio">Conservatório</option>
	</select>

	<div id="depart-unidade1" style="display: none;">
		<select id="dp" name="dp">
			<option value="" selected="true">Selecione o Departamento</option>
			<option value="1">Departamento Unidade 1</option>
			<option value="2">Departamento Unidade 1</option>
			<option value="3">Departamento Unidade 1</option>
			<option value="4">Departamento Unidade 1</option>
		</select>
	</div>
					
	<div id="depart-unidade2" style="display: none;">
		<select id="dp" name="dp">
			<option value="" selected="true">Selecione o Departamento</option>
			<option value="5">Departamento Unidade 2</option>
			<option value="6">Departamento Unidade 2</option>
			<option value="7">Departamento Unidade 2</option>
			<option value="8">Departamento Unidade 2</option>
		</select>
	</div>
					
	<div id="depart-faculdade" style="display: none;">
		<select id="dp" name="dp">
			<option value="" selected="true">Selecione o Departamento</option>
			<option value="9">Departamento Faculdade</option>
			<option value="10">Departamento Faculdade</option>
			<option value="11">Departamento Faculdade</option>
			<option value="12">Departamento Faculdade</option>
		</select>
	</div>
					
	<div id="depart-conservatorio" style="display: none;">
		<select id="dp" name="dp">
			<option value="" selected="true">Selecione o Departamento</option>
			<option value="13">Departamento Conservatório</option>
			<option value="14">Departamento Conservatório</option>
			<option value="15">Departamento Conservatório</option>
			<option value="16">Departamento Conservatório</option>
		</select>
	</div>
					
	<p><textarea id="mensagem" name="mensagem" rows="5" placeholder="Mensagem"></textarea></p>
					
	<p><input type="submit" name="enviar" value="Enviar"></p>

</form>

[Rafael Sirotheau 43]

O primeiro problema que posso notar é que você está repetindo IDs e NAMEs.

IDs devem ser únicos em todo o HTML, independente do elemento estar visível ou não

NAMEs devem ser únicos (no mínimo) por formulário.


Sendo assim, tente primeiro trocar seus IDs desse 'sub select' de departamento para que sejam únicos. Depois, faça o mesmo para os NAMEs. Minha sugestão?

name/id = dp-unidade1, dp-unidade2, etc...

E, então, no seu validador, troque a linha que verifica o departamento por

if (document.formContato['dp-'+document.formContato.unidade.value].value == "") {
  alert('Departamento: Seleção Obrigatória!');
  document.formContato['dp-'+document.formContato.unidade.value].focus();
  return false;
}	

[angelorubin 142]

Estou precisando/fazendo um formulário que ao selecionar o select da Unidade, mostrar outro select para selecionar o Departamento.

 

Quanto a esta parte, você pode fazer algo assim - http://jsfiddle.net/angelorubin/3e3avqo3

[eduardom 0]

@Rafael, @angelorubin

 

Obrigado pela ajuda.

 

Funcionou perfeitamente!