Solo un campo obbligatorio

Salve a Tutti...vorrei un'informazione (premetto che di js non ci capisco nulla....mi ci avvicino ora per la prima volta)

avrei bisogno di creare un form....con all'interno alcuni campi che gli utenti compilano ( required="required" )

ho un problemino però...su un campo avrei bisogno di fare una cosa che ho visto in numerosi siti....

un campo si selezione ed un campo text/area.....però il campo che l'utente compila deve essere obbligatorio....quello lasciato in binaco no...in modo tale che se l'utente tenti di lasciarli bianchi entrambi gli viene fuori la mascherina con scritto che deve compilarne almeno uno.....se ne compila solo uno non dà errore, se li compila entrambi appare un messaggio (windows allert) con scritto che solo un campo può essere compilato.....

meglio di tutto sarebbe una cosa del tipo:

sul campo selezione se seleziono altro appare affianco ad esso un text/area obbligatorio, se l'utente seleziona un'altra voce non appare nulla.....

tutto ciò è fattibile? cosa mi consigliate?

Ringrazio in anticipo
Popo96

Usando jQuery , come prima cosa disabiliterei la funzione SUBMIT
quindi assegnerei al tasto SUBMIT l'esecuzione di una funzione che esegue le tue verifiche , inviando in caso di errore ALERT , ed in caso di un corretto inserimento esegua l'azione.

struttura HTML

Codice HTML:

---

<form id="mioFORM" action="">
 Campo1:<input type="text" name="capo1" id="campo1"/>
 Campo2:<input type="text" name="capo2" id="campo2"/>
 <button onclick="controllo()">INVIA</button>
</form>

---

1) carico la libreria jQuery

Codice:

---

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

---

2) disabilto la funzione SUBMIT

Codice:

---

$(document).ready(function(){
 $("#mioFORM").submit(function( event ){
  event.preventDefault();
 });
});

---

3) creo la funzione controllo()

Codice:

---

function controllo(){
 var controlla = true;
 var campo1 = $("#campo1").val();
 var campo2 = $("#campo2").val();

 if(campo1=="" && campo2==""){
  alert("compilare almeno un campo");
  controlla=false;
 }

 if(campo1!="" && campo2!=""){
  alert("compilare solo un campo");
  controlla=false;
 }

 if(controlla){
  $("form").submit(function(event){
  $(this).unbind('submit').submit();
  });
 }
}

---

DEMO

scusa ma anche nella demo...quando io compilo uno dei 2 campi l'altro non si disattiva....come faccio?

Se non ti basta il controllo sul SUBMIT che non ti permette di inserire tutte e due i campi (o nessuno dei due) ma solo uno ;
e vuoi anche disabilitare il campo devi creare una funzione che controlli la modifica del campo , quindi al suo variare se contiene un valore disabilita l'altro campo.

Codice:

---

$("#campo1").change(function(){
  var valore1 = $("#campo1").val();
  if(valore1!=""){
  $("#campo2").prop("disabled",true);
  }else{
  $("#campo2").prop("disabled",false);
  }
 });

---

DEMO2

Grazie mille