Kayıt Formu Kontrolü Yapmak İstiyorum

Kayıt Formunda Bilgileri Anlık Olarak Kontrol Etmek İstiyorum
Burdaki Tasarımı Kullanmak İstiyorum
Tayfun Abinin fORM Kontrolü Videosunu İzledim Ama Mesala Kullanıcı Adını Kontrol Edemiyorum Databasede Varmı Yokmu Post Etmeden Kontrol Etmek İstiyorum

 <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer01">First name</label>
      <input type="text" class="form-control is-valid" id="validationServer01" value="Mark" required>
      <div class="valid-feedback">
        Looks good!
      </div>
    </div>
    _______________________________________________________
    <div class="form-row">
    <div class="col-md-6 mb-3">
      <label for="validationServer03">City</label>
      <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
      <div id="validationServer03Feedback" class="invalid-feedback">
        Please provide a valid city.
      </div>
    </div>

Sunucuya istek göndermeden kullanıcı adının varlığını kontrol etmen mümkün değil. Post'tan kastın sayfa yenilenmesi ile alakalı ise AJAX ile bundan kaçınarak işlem yapabilirsin.

Örneğin kullanıcı adı input'ının onkeyup olayında API endpointine bir AJAX isteği göndererek kullanıcı adı var mı yok mu kontrol edebilirsin. Bu API endpointinde veritabanı üzerinden kullanıcı adının bulunduğu satır sayısını çekip 0'dan büyük ise JSON ile hata mesajı döndürebilirsiniz. Javascript tarafında eğer APIden success değeri false olarak geliyor ise inputın invalid olmasını sağlayabilirsin. Bunun için JS'deki setCustomValidity özelliğini kullanabilirsiniz.