Zorunlu alanları doldurma ve seçeneğe göre değer gelmesi

resat 746 gün önce

422 defa görüntülendi ve 1 kişi tarafından değerlendirildi

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>

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (2)

ebykdrms

745 gün önce

İnceleyebilmeniz için bir örnek:
https://codepen.io/ebykdrms/pen/LYrWEaY

İleride CodePen'den silme ihtimalime karşı kodları buraya da bırakıyorum:

<div id="steps">
  <div class="step" data-step-name="step-1">
    <label>
      <span>Ad</span>
      <input name="name" required />
    </label>
    <label>
      <span>Soyad</span>
      <input name="surname" required />
    </label>
    <label>
      <span>E-posta</span>
      <input name="email" />
    </label>
    <label>
      <span>Cinsiyet</span>
      <select name="gender" required>
        <option value="" disabled selected>Seçiniz</option>
        <option value="Kadın">Kadın</option>
        <option value="Erkek">Erkek</option>
      </select>
    </label>
    <button class="nextStepButton">
      Devam 
      <i class="fa-solid fa-chevron-right"></i>
    </button>
  </div>

  <div class="step" data-step-name="step-2" data-step-by="Erkek">
    <h2 class="hello"></h2>
    <label>
      <span>Yaş</span>
      <input name="age" />
    </label>
    <div class="stepButtons">
      <button class="prevStepButton">
        <i class="fa-solid fa-chevron-left"></i>
        Geri 
      </button>
      <button class="nextStepButton">
        Devam 
        <i class="fa-solid fa-chevron-right"></i>
      </button>
    </div>
  </div>

  <div class="step" data-step-name="step-2" data-step-by="Kadın">
    <h2 class="hello"></h2>
    <label>
      <span>Maaş</span>
      <input name="salary" />
    </label>
    <div class="stepButtons">
      <button class="prevStepButton">
        <i class="fa-solid fa-chevron-left"></i>
        Geri 
      </button>
      <button class="nextStepButton">
        Devam 
        <i class="fa-solid fa-chevron-right"></i>
      </button>
    </div>
  </div>

  <div class="step" data-step-name="step-3">
    <div class="info"></div>
    <div class="stepButtons">
      <button class="prevStepButton">
        <i class="fa-solid fa-chevron-left"></i>
        Geri 
      </button>
      <button class="nextStepButton">
        Onayla 
        <i class="fa-solid fa-check"></i>
      </button>
    </div>
  </div>
</div>

.step {
  display:flex;
  flex-direction:column;
  padding:5px;
  border:1px solid #ddd;
  margin:10px;
  max-width:300px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease 0s;
}
.step.active {
  pointer-events:auto;
  opacity:1;
}
.step h2 {
  padding:10px 5px;
  font-weight:bold;
  border-bottom:1px solid #ddd;
  margin-bottom:5px;
}
.step label {
  display:flex;
  flex-direction:column;
  padding:5px;
}
.step label input, 
.step label select {
  padding:5px;
  margin-top:5px;
  border:1px solid #ccc;
  outline:none;
}
.step label input.required,
.step label select.required {
  border-color:red;
}
.step .stepButtons {
  display:flex;
  flex-direction:row;  
}
.step button {
  cursor:pointer;
  transition:opacity ease .1s;
}
.step button:active {
  opacity:0.5;
}
.step .nextStepButton {
  padding:10px;
  margin:5px;  
  margin-top:20px;
  border:1px solid #000;
  background:#000;
  color:#fff;
  flex:2;
}
.step .prevStepButton {
  padding:10px;
  margin:5px;  
  margin-top:20px;
  border:1px solid #000;
  background:#fff;
  color:#000;
  flex:1;
}
.step .nextStepButton i,
.step .prevStepButton i {
  margin:0 5px;
}

.step .info table {
  margin:5px;
  border:1px solid #ddd;
  border-bottom:none;
  width:calc(100% - 10px);
}
.step .info table tr td {
  padding:5px;
  border-bottom:1px solid #ddd;
}

function doValidation($wrapper) {
    const $inputs = $wrapper.find("input[required],select[required]");
    let validationStatus = true;
    for(let i=0; i < $inputs.length; i++) {
        const $input = $inputs.eq(i);
      console.log($input.val())
      if(!$input.val() || $input.val().trim()=="") {
            validationStatus = false;
            $input.addClass("required");
            $input.one("input change", function() {
              $(this).removeClass("required");
            });
        }
    }
    return validationStatus;
}

const $stepsWrapper = $("#steps");
const $steps = $stepsWrapper.find(".step").clone();
$(".step").remove();
const stepDatas = {};

const getStep = (stepName, stepBy=null) => {
  const stepNameQuery = `[data-step-name="${stepName}"]`;
  const stepByQuery = stepBy ? `[data-step-by="${stepBy}"]` : "";
  return $steps.filter(stepNameQuery+stepByQuery);
}

const activeStep = ($step) => {
  $(".step").removeClass("active").remove();
  $stepsWrapper.append($step);
  setTimeout(()=>{$step.addClass("active");},10);
}

$(document).on("click", ".step .nextStepButton", function(){
  const $currentStep = $(this).closest(".step");
  if(!doValidation($currentStep)) return;
  const stepName = $currentStep.attr('data-step-name');
  const stepBy = $currentStep.attr('data-step-by');
  
  if(stepName=="step-1") {
    stepDatas.name = $currentStep.find(`input[name="name"]`).val();
    stepDatas.surname = $currentStep.find(`input[name="surname"]`).val();
    stepDatas.email = $currentStep.find(`input[name="email"]`).val();
    stepDatas.gender = $currentStep.find(`select[name="gender"]`).val();
    const $targetStep = getStep("step-2", stepDatas.gender);
    $targetStep.find('h2').text(`Merhaba ${stepDatas.name} ${stepDatas.surname} ${stepDatas.gender=="Kadın"?"Hanım":"Bey"}`);
    activeStep($targetStep);
    return;
  }
  if(stepName=="step-2") {
    if(stepBy=="Kadın") {
      stepDatas.salary = $currentStep.find(`input[name="salary"]`).val();
    }
    else {
      stepDatas.age = $currentStep.find(`input[name="age"]`).val();
    }
    const $targetStep = getStep("step-3");
    const name = `${stepDatas.name} ${stepDatas.surname}`;
    const email = stepDatas.email;
    const gender = stepDatas.gender=="Kadın" ? "Hanım" : "Bey";
    const salary = stepDatas.salary ?? "";
    const age = stepDatas.age ?? "";
    $targetStep.find('.info').html(`
      <table>
        <tr><td>Üye</td><td>${name} ${gender}</td></tr>
        <tr><td>E-posta</td><td>${email}</td></tr>
        <tr><td>Maaş</td><td>${salary}</td></tr>
        <tr><td>Yaş</td><td>${age}</td></tr>
       </table>
    `);
    activeStep($targetStep);
    return;
  }
  if(stepName=="step-3") {
    alert("Tamam");
    activeStep(getStep("step-1"));
    return;
  }
});

$(document).on("click", ".step .prevStepButton", function(){
  const $currentStep = $(this).closest(".step");
  const stepName = $currentStep.attr('data-step-name');
  const stepBy = $currentStep.attr('data-step-by');
    
  if(stepName=="step-2") {
    activeStep(getStep("step-1"));
    return;
  }
  if(stepName=="step-3") {
    activeStep(getStep("step-2", stepDatas.gender));
    return;
  }
});

activeStep(getStep("step-1"));

#011423

admin

746 gün önce

form etiketiyle kapsamaniz gerekiyor. required durumunun calismasi icin. validation kutuphanesi ile calismaniz daha dogru olacaktir.

#011422