Buongiorno a tutti,

sto cercando di realizzare un "mini form" che contiene campi da compilare in due div diverse visualizzabbili o meno mediante la selezione dei rispettivi pulsanti radio (fino a qui tutto ok) il problema è che non riesco a rendere obbligatori i soli campi della div selezionata rispetto l'altra (o viceversa)
Di seguito posto lo script che mi permette di visualizzare una div selezionata rispetto l'altra
codice:
<script type='text/javascript'>
//Inizio script per gestione ragione sociale
              function esistenters() {
                if ($('#esistenters').prop('checked')) {
                    $('#esistenteRagione').show();
                } else {
                    $('#esistenteRagione').hide();
                }
            }
            
            function nuovars() {
                if ($('#nuovars').prop('checked')) {
                    $('#nuovaRagione').show();
                } else {
                    $('#nuovaRagione').hide();
                }
            }
            
            
            $(document).ready(function(){
                $('.ausilio').hide();
                if ($('#esistenters').prop('checked')) {
                    $('#nuovaRagione').hide();
                }
                esistenters();
                nuovars();
                $('#esistenters').click(function() {
                      $('#nuovaRagione').hide();
                    esistenters();
                    nuovars();
                });
                $('#nuovars').click(function() {
                      $('#nuovaRagione').show();
                    esistenters();
                    nuovars();
                });
            });
//Fine script ragione sociale
</script>
A questo punto vi posto la parte html del form in questione per rendere meglio l'idea
codice:
<!--Inizio elementi del form-->        
<form name="ciao" method="POST" action="inviomodulo.php" enctype="multipart/form-data">
<h3>
<strong>Società</strong>
</h3>
<input name="ragiones" type="radio" value="Esistente" id="esistenters" required="required" />Esistente
<div id="esistenteRagione">
Denominazione * <input name="ragionesnome" type="text" required />
  (Ragione sociale) 
<br />
Indirizzo e-mail * <input name="mail1" type="text" required />   
</div>
<br/>
<input name="ragiones" type="radio" value="Nuova" id="nuovars" />Nuova     
   
<div id="nuovaRagione" class="riga">
Denominazione *
  <input name="ragionesnome" type="text" required />
  (Ragione sociale)
<br />    
Via *
<input name="viaso" type="text" required />
<br />
n° *
<input name="civicoso" type="text" required />
<br />
CAP *
<input name="capso" type="text" required />
<br />
Città *
<input name="cittaso" type="text" required />
<br />
Provincia *
<input name="provinciaso" type="text" required />
<br />
Partita IVA *
<input name="pivaso" type="text" required />
<br />
E-mai 1 *
<input name="mail1" type="text" required />
</div>


Ho provato ad utilizzare l'attributo "required" per obbligare l'inserimento dei campi ma se compilo i campi del "primo div" (esistenteRagione) quando clicco sul pulsante Submit il modulo non viene inviato perché anche i campi nascosti del "secondo div" (nuovaRagione) sono obbligatori; come posso fare?

Grazie mille a chi vorrà dedicarmi del tempo