Wizard form required kontrolü
Selamlar aşamalı formum var veri boş olsada ilerleme yapılıyor inputta required=""> olsa da zorunluluk olmuyor veri doldurmadan geçmesini nası engellerim
<div class="bidding__item js-bidding-item" style="display: block;">
<div class="payment">
<div class="payment__fieldset">
<div class="payment__row">
<div class="field">
<div class="field__label">Ad</div>
<div class="field__wrap">
<input class="field__input" type="text" name="ad" placeholder="Ad" required="">
</div>
</div>
<div class="field">
<div class="field__label">Soyad</div>
<div class="field__wrap">
<input class="field__input" type="text" name="soyad" placeholder="Soyad" required="">
</div>
</div>
</div>
<div class="field">
<div class="field__label">Email</div>
<div class="field__wrap">
<input class="field__input" type="email" name="email" placeholder="Email" required="">
</div>
</div>
<div class="field">
<div class="field__label">Telefon</div>
<div class="field__wrap">
<input class="field__input" type="text" name="telefon" placeholder="Telefon" required="">
</div>
</div>
<div class="payment__btns">
<button type="button" class="button payment__button js-bidding-button">İleri</button>
</div>
</div>
</div>
</div>
<div class="bidding__item js-bidding-item" style="display: none;">
<div class="bidding__control">
<button class="bidding__back js-bidding-back">
</button>
</div>
<div class="payment">
<div class="payment__fieldset">
<div class="field">
<div class="field__label"><?=$dil['19']?></div>
<div class="field__wrap">
<select class="field__input" id="Iller" name="sehir">
<option value="0"><?=$dil['20']?></option>
</select>
</div>
</div>
<div class="field">
<div class="field__label">İlçe Seçiniz</div>
<div class="field__wrap">
<select class="field__input" id="Ilceler" name="ilce" disabled="disabled">
<option value="0">Lütfen Önce bir İl seçiniz</option>
</select>
</div>
</div>
<div class="field">
<div class="field__label">Çalıştığınız Emlak Ofisi</div>
<div class="field__wrap">
<input class="field__input" type="text" name="ofis" placeholder="Çalıştığınız Emlak Ofisi" value="">
</div>
</div>
<div class="setting__row">
<div class="field">
<div class="field__label">Kullanici Adı</div>
<div class="field__wrap">
<input class="field__input" type="text" name="sef" placeholder="Kullanici Adı" >
</div>
</div>
<div class="field">
<div class="field__label"><?=$dil['5']?></div>
<div class="field__wrap">
<input class="field__input" type="text" name="sifre" placeholder="<?=$dil['5']?>" >
</div>
</div>
</div>
<div class="payment__btns">
<button type="button" class="button payment__button js-bidding-button">İleri</button>
</div>
</div>
</div>
</div>
(function () {
var bidding = $('.js-bidding'),
step = bidding.find('.js-bidding-step'),
item = bidding.find('.js-bidding-item'),
button = bidding.find('.js-bidding-button'),
back = bidding.find('.js-bidding-back');
var counter = 0;
button.on('click', function () {
var currentNext = ++counter;
step.eq(currentNext).addClass('next');
step.eq(currentNext - 1).addClass('active');
item.hide();
item.eq(currentNext).show();
});
back.on('click', function () {
var currentPrev = --counter;
step.eq(currentPrev + 1).removeClass('next');
step.eq(currentPrev).removeClass('active');
item.hide();
item.eq(currentPrev).show();
});
})(); // wizard
required standart kullanımında required="" pek doğru olmayabilir. direkt olarak required yazıp geçebilirsin.
herbir aşama butonunun click eventine aşağıdaki gibi bir kontrol koyabilirsin.
if ($('#asama-form-1').valid()) {
// form geçerli ise gerçekleşecek kodlar buraya..
}else{
// form geçersiz ise alert vs basabilirsin...
}
ya da formlar üzerinde özellikle birkaç inputu kontrol etmek istiyorsan jquery ile input valid mi || boş mu bakabilirsin.