Submit only select form by checkbox - html

Question

i have this problem on form validation.
as you can see from image number 1, the user can make a choice. depending on the choice you make, change the form. (image number 2 and 3)
The fields, I put them as mandatory, and the two sections, are display: none, until the user clicks on one of the two buttons.
How can I activate only one form based on the choice made?
If I click on the submit button, while completing the fields of the first form, it asks me for the fields of the second form, as they are mandatory.
Many thanks in advance
jquery code for show button:
$( "#button-ritira" ).click(function() {
$( "#ricevi" ).hide( 1000 );
$( "#ritira" ).show( 400 );
});
$( "#button-ricevi" ).click(function() {
$( "#ritira" ).hide( 1000 );
$( "#ricevi" ).show( 400 );
});
the HTML code:
<div class="row mb-45">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2 text-center">
<label class="label-space-radio-ritira mb-25">
<input type="radio" name="ritira" id="button-ritira" autocomplete="off">
<span class="radiocustom-ritira"></span>
</label>
</div>
<div class="col-lg-4 text-center">
<label class="label-space-radio-ritira mb-25">
<input type="radio" name="ritira" id="button-ricevi" autocomplete="off">
<span class="radiocustom-ricevi"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="ritira">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="input-form-ricevi-ritira">
<label>Nome</label>
<input type="text" name="nome" placeholder="Nome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cognome</label>
<input type="text" name="cognome" placeholder="Cognome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Email</label>
<input type="text" name="email" placeholder="Email" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cellulare</label>
<input type="text" name="cellulare" placeholder="Cellulare" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<img src="img/assets/titolo-quando.svg" alt="titolo quando cremeria opera" class="titolo-quando">
<div class="row m-giorno-ora">
<div class="col-lg-6">
<div class="input-form-ricevi-ritira ">
<label>Giorno</label>
<input type="text" name="giorno" placeholder="gg/mm/aaaa" class="input-giorno" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<div class="input-form-ricevi-ritira ">
<label>Ora</label>
<input type="text" name="ora" placeholder="00:00" class="input-ora" required autocomplete="off">
</div>
</div>
</div>
<img src="img/assets/titolo-dove.svg" alt="titolo dove cremeria opera" class="titolo-dove">
<label class="label-space-radiodove ">Sant'Anna
<span class="inner-light-title-check">Viale Gaetano Luporini, 951 - Lucca</span>
<input type="radio" name="ritiro" autocomplete="off">
<span class="radiodove"></span>
</label>
<label class="label-space-radiodove mb-25">Sant'Alessio
<span class="inner-light-title-check">Via di Sant'Alessio, 927 - Lucca</span>
<input type="radio" name="ritiro" autocomplete="off">
<span class="radiodove"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="ricevi">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="input-form-ricevi-ritira">
<label>Nome</label>
<input type="text" name="nome" placeholder="Nome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cognome</label>
<input type="text" name="cognome" placeholder="Cognome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Email</label>
<input type="text" name="email" placeholder="Email" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cellulare</label>
<input type="text" name="cellulare" placeholder="Cellulare" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<img src="img/assets/titolo-quando.svg" alt="titolo quando cremeria opera" class="titolo-quando">
<div class="row m-giorno-ora">
<div class="col-lg-6">
<div class="input-form-ricevi-ritira ">
<label>Giorno</label>
<input type="text" name="giorno" placeholder="gg/mm/aaaa" class="input-giorno" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<div class="input-form-ricevi-ritira ">
<label>Ora</label>
<input type="text" name="ora" placeholder="00:00" class="input-ora" required autocomplete="off">
</div>
</div>
</div>
<img src="img/assets/titolo-dove.svg" alt="titolo dove cremeria opera" class="titolo-dove">
<div class="input-form-ricevi-ritira input-indirizzo">
<label>Indirizzo</label>
<input type="text" name="indirizzo" placeholder="Inserisci l'indirizzo completo" required>
</div>
</div>
</div>
</div>
</div>

Answer 1

Apart from hiding and showing give your one form class disabled on all input fields. The other one disabledtwo. When you show and hide the form you also enable/disable input filed of other so it wont get posted.
You can see the demo without hiding the fields get disabled.
If by any chance (I doubt) they still ask to be filed because of required, you can also remove/add required on them the same way
$( "#button-ritira" ).click(function() {
//$( "#ricevi" ).hide( 1000 );
//$( "#ritira" ).show( 400 );
$(".disabled").prop('disabled', true);
$(".disabledtwo").prop('disabled', false);
});
$( "#button-ricevi" ).click(function() {
//$( "#ritira" ).hide( 1000 );
//$( "#ricevi" ).show( 400 );
$(".disabledtwo").prop('disabled', true);
$(".disabled").prop('disabled', false);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row mb-45">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2 text-center">
<label class="label-space-radio-ritira mb-25">
<input type="radio" name="ritira" id="button-ritira" autocomplete="off">
<span class="radiocustom-ritira"></span>
</label>
</div>
<div class="col-lg-4 text-center">
<label class="label-space-radio-ritira mb-25">
<input type="radio" name="ritira" id="button-ricevi" autocomplete="off">
<span class="radiocustom-ricevi"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="ritira">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="input-form-ricevi-ritira">
<label>Nome</label>
<input type="text" name="nome" class="disabled" placeholder="Nome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cognome</label>
<input type="text" name="cognome" class="disabled"placeholder="Cognome" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Email</label>
<input type="text" name="email" class="disabled"placeholder="Email" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cellulare</label>
<input type="text" name="cellulare" class="disabled" placeholder="Cellulare" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<img src="img/assets/titolo-quando.svg" alt="titolo quando cremeria opera" class="titolo-quando">
<div class="row m-giorno-ora">
<div class="col-lg-6">
<div class="input-form-ricevi-ritira ">
<label>Giorno</label>
<input type="text" name="giorno" class="disabled" placeholder="gg/mm/aaaa" class="input-giorno" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<div class="input-form-ricevi-ritira ">
<label>Ora</label>
<input type="text" name="ora" class="disabled" placeholder="00:00" class="input-ora" required autocomplete="off">
</div>
</div>
</div>
<img src="img/assets/titolo-dove.svg" alt="titolo dove cremeria opera" class="titolo-dove">
<label class="label-space-radiodove ">Sant'Anna
<span class="inner-light-title-check">Viale Gaetano Luporini, 951 - Lucca</span>
<input type="radio" name="ritiro" class="disabled" autocomplete="off">
<span class="radiodove"></span>
</label>
<label class="label-space-radiodove mb-25">Sant'Alessio
<span class="inner-light-title-check">Via di Sant'Alessio, 927 - Lucca</span>
<input type="radio" name="ritiro" class="disabled" autocomplete="off">
<span class="radiodove"></span>
</label>
</div>
</div>
</div>
</div>
<div class="row" id="ricevi">
<div class="col-lg-12">
<div class="row">
<div class="col-lg-4 offset-lg-2">
<div class="input-form-ricevi-ritira">
<label>Nome</label>
<input type="text" name="nome" placeholder="Nome" class="disabledtwo" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cognome</label>
<input type="text" name="cognome" placeholder="Cognome" class="disabledtwo" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Email</label>
<input type="text" name="email" placeholder="Email" class="disabledtwo"required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Cellulare</label>
<input type="text" name="cellulare" placeholder="Cellulare" class="disabledtwo"required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<img src="img/assets/titolo-quando.svg" alt="titolo quando cremeria opera" class="titolo-quando">
<div class="row m-giorno-ora">
<div class="col-lg-6">
<div class="input-form-ricevi-ritira ">
<label>Giorno</label>
<input type="text" name="giorno" placeholder="gg/mm/aaaa" class="disabledtwo"class="input-giorno" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
<div class="input-form-ricevi-ritira ">
<label>Ora</label>
<input type="text" name="ora" placeholder="00:00" class="disabledtwo" class="input-ora" required autocomplete="off">
</div>
</div>
</div>
<img src="img/assets/titolo-dove.svg" alt="titolo dove cremeria opera" class="titolo-dove">
<div class="input-form-ricevi-ritira input-indirizzo">
<label>Indirizzo</label>
<input type="text" name="indirizzo" placeholder="Inserisci l'indirizzo completo" class="disabledtwo" required>
</div>
</div>
</div>
</div>
</div>