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