I am encountering an issue with form validation.
In the first image, users can make a choice that will determine the display of either form 2 or form 3 (shown in images 2 and 3).
The fields in each form are marked as mandatory but both sections start as display: none. They only appear once the user clicks on one of the two buttons.
How can I ensure that only one form is activated based on the user's choice?
When I try to submit while filling out the fields in the first form, it prompts for the required fields in the second form as well.
https://i.sstatic.net/atLnB.png https://i.sstatic.net/ppxBL.png https://i.sstatic.net/HYr1e.png
Thank you in advance
Here is the jQuery code to show the button:
$( "#button-ritira" ).click(function() {
$( "#ricevi" ).hide( 1000 );
$( "#ritira" ).show( 400 );
});
$( "#button-ricevi" ).click(function() {
$( "#ritira" ).hide( 1000 );
$( "#ricevi" ).show( 400 );
});
This is 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>Name</label>
<input type="text" name="name" placeholder="Name" required autocomplete="off">
</div>
<div class="input-form-ricevi-ritira">
<label>Surname</label>
<input type="text" name="surname" placeholder="Surname" 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>Mobile</label>
<input type="text" name="mobile" placeholder="Mobile" required autocomplete="off">
</div>
</div>
<div class="col-lg-4">
...
</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>
<div class="col-lg-4">
...
</div>
</div>
</div>
</div>