Merhaba arkadaşlar bir step formum var. Burada 1.stepde boş alan bırakmasını istemiyorum required yapıyorum fakat ileri butonuna basınca uyarı vermiyor.

Diğer sorunum ise ilk stepde eğer Erkek seçilirse 2.stepde onunla ilgili seçenekler gelecek kadın seçilirse kadın ile ilgili seçenekler.

Yardımlarınız için teşekkürler şimdiden

                      <div class="tab-pane active" role="tabpanel" id="step1">
                    <div class="card text-center shadow-sm ">
                      <div class="card-body">
                        <div class="cinsiyet">
                          <h5 class="card-title">Cinsiyet Seçiniz</h5>
                          
                          <input type="radio" value="Erkek" id="erkek" name="cinsiyet" required="">
                          <label for="erkek"><i class="fa-solid fa-mars"></i> Erkek </label>
                          
                          <input type="radio" value="Kadın" id="kadin" name="cinsiyet" required="">
                          <label for="kadin"><i class="fa-solid fa-venus"></i> Kadın </label>
                        </div>
                        <div class="sacrenk mt-3">
                          <h5 class="card-title">Saç Renginiz</h5>
                          
                          <input type="radio" value="Siyah" id="siyah" name="renk" required="">
                          <label for="siyah">
                            <img src="sac-rengi-siyah.png" width="100">
                            <br>Siyah </label>
                          
                          <input type="radio" value="Sarı" id="sari" name="renk" required="">
                          <label for="sari">
                            <img src="sac-rengi-sari.png" width="100">
                            <br>Sarı </label>
                          
                          <input type="radio" value="Kahve" id="kahve" name="renk" required="">
                          <label for="kahve">
                            <img src="sac-rengi-kahve.png" width="100">
                            <br>Kahve </label>
                          
                          <input type="radio" value="Kızıl" id="kizil" name="renk" required="">
                          <label for="kizil">
                            <img src="sac-rengi-kizil.png" width="100">
                            <br>Kızıl </label>
                        </div>
                      </div>
                      <div class="card-footer text-muted">
                        <button type="button" class="btn btn-success next-step">İleri</button>
                      </div>
                    </div>
                  </div>