Отправить только выберите форму с помощью флажка

Question

У меня есть эта проблема при проверке формы.

, как вы можете видеть на изображении № 1, пользователь может сделать выбор. в зависимости от выбора, который вы делаете, измените форму. (изображения № 2 и 3)

Поля, которые я назвал обязательными, и два раздела отображаются на дисплее: нет, пока пользователь не нажмет одну из двух кнопок.

Как могу ли я активировать только одну форму на основе сделанного выбора?

Если я нажимаю на кнопку отправки, заполняя поля первой формы, она запрашивает у меня поля второй формы, поскольку они являются обязательными .

Большое спасибо заранее

jquery код кнопки показа:

$( "#button-ritira" ).click(function() {
              $( "#ricevi" ).hide( 1000 );
              $( "#ritira" ).show( 400 );
            });

            $( "#button-ricevi" ).click(function() {
              $( "#ritira" ).hide( 1000 );
              $( "#ricevi" ).show( 400 );
            });

код HTML:

<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

Помимо сокрытия и отображения, оставьте один класс формы отключенным во всех полях ввода. Другой отключил два. Когда вы показываете и скрываете форму, вы также включаете / отключаете входные поля других, чтобы они не публиковались.

Вы можете увидеть демо, не скрывая, что поля отключены.

Если по какой-либо причине (я сомневаюсь) они все еще просят подать из-за необходимости, вы также можете удалить / добавить необходимые для них таким же образом

$( "#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>