Script per scelta campi da obbligare in base a div selezionata

[Marcoplm]

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

<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

<!--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

[m4rko80]

Ciao, visto che usi jQuery è semplicissimo.
Alla selezione del radio per il pannello interessato rimuovi l'attributo required.
Dal momento in cui togliendolo però non saprai più dove rimetterlo ritornando al pannello di prima, per non stare a mappare ogni tag ti conviene dare agli stessi tag anche una classe tipo class="required" così poi con una sola riga di codice attivi o disattivi i tags.

//Sul click del radio....
$('.required').removeAttr('required');
//oppure
$('.required').attr('required','required');

[Marcoplm]

Ciao!

Ti andrebbe di farmi vedere dove inserire la riga di codice sul mio script?
Io l'ho inserita in questa parte: (commento QUI)

$(document).ready(function(){
                $('.ausilio').hide();
                if ($('#esistenters').prop('checked')) {
                    $('#nuovaRagione').hide();
                }
                esistenters();
                nuovars();
                $('#esistenters').click(function() {
                      $('#nuovaRagione').hide();
                    $('#nuovaRagione').removeAttr('required');  //QUI
                    esistenters();
                    nuovars();
                });
                $('#nuovars').click(function() {
                      $('#nuovaRagione').show();
                    $('#nuovaRagione').removeAttr('required');  //QUI
                    esistenters();
                    nuovars();
                });

Anche la seguente parte non l'ho ben capita...

Dal momento in cui togliendolo però non saprai più dove rimetterlo ritornando al pannello di prima, per non stare a mappare ogni tag ti conviene dare agli stessi tag anche una classe tipo class="required" così poi con una sola riga di codice attivi o disattivi i tags.

Cioè mi consigli di assegnare una classe identica ad entrambi i div? (commento QUI)

<input name="ragiones" type="radio" value="Esistente" id="esistenters" />Esistente
<div id="esistenteRagione" class="required">  <!-- QUI -->
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="required">  <!-- QUI -->
Denominazione *
  <input name="ragionesnome" type="text" required />
  (Ragione sociale)
<br />    
Via *
<input name="viaso" type="text" required />

[m4rko80]

Premesso che non so cosa facciano le due funzioni esistener() e nuovars() (e che potrebbero in parte fare gia' quello che ho scritto qui...) dovrebbe essere corretto cosi':

<input name="ragiones" type="radio" value="Esistente" id="esistenters" />Esistente
<div id="esistenteRagione" >
Denominazione * <input name="ragionesnome" type="text" class="required" required />
  (Ragione sociale) 
<br />
Indirizzo e-mail * <input name="mail1" type="text" class="required" required />   
</div>
<br/>
<input name="ragiones" type="radio" value="Nuova" id="nuovars" />Nuova     
   
<div id="nuovaRagione">
Denominazione *
  <input name="ragionesnome" type="text" class="required" required />
  (Ragione sociale)
<br />    
Via *
<input name="viaso" type="text" class="required" required />

<script>
$(document).ready(function(){
                $('.ausilio').hide();
                if ($('#esistenters').prop('checked')) {
                    $('#nuovaRagione').hide();
                    $('#nuovaRagione .required').removeAttr('required');
                }
                esistenters();
                nuovars();
                
                $('#esistenters').click(function() {
                    $('#nuovaRagione').hide();                                        
                    $('#nuovaRagione .required').removeAttr('required');
                    $('#esistenters .required').attr('required','true');
                    $('#esistenters').show();
                    esistenters();
                    nuovars();
                });

                $('#nuovars').click(function() {
                    $('#esistenters').hide();                                        
                    $('#esistenters .required').removeAttr('required');
                    $('#nuovaRagione .required').attr('required','true');
                    $('#nuovars').show();
                    esistenters();
                    nuovars();
                });                                               
</script>

[Marcoplm]

Perfetto ora funziona!
Grazie mille per l'aiuto!!