Okul.com.tr — Eğitim Ekosistemi

Mobile register popup'ta 422 hatalarının FE'de hiç render edilmemesi

3 dakika okuma süresi

Proje: Okul Platform · Hub: Okul Platform — Incidents

Symptom

Mobile’da popup-login-modal register tab’ından üye olmaya çalışınca, backend /kayit-ol (user.register.post) 422 dönüyor — errors.kvkk_consent, errors.name, errors.email vs. — ama form’da hiçbir hata mesajı görünmüyordu. Console’da bir süre Uncaught TypeError: n.parent().after is not a function da çıkıyordu.

Aynı sorun LGS form (/ajax/submitDynForm), scholarship form, college-show form için de geçerliydi (kvkk_consent özelinde).

Root cause — üç bug üst üste

1. mobile/app.js içindeki callAjax 422’yi handle edemiyor (latent bug)

callAjax (line ~2686) error branch’ında xhr.responseJSON referansı var:

error: function (xhr) {
    var errorData = {success: false, messages: {}};
    if (xhr.responseJSON) { ... }
    callback(errorData);
}

Framework7 1.6 Dom7’nin $$.ajax error callback’i raw XMLHttpRequest veriyor, jQuery gibi responseJSON populate etmiyor — bkz. bower_components/framework7/dist/js/framework7.js:12838-12858. Sonuç: xhr.responseJSON her zaman undefined, errorData.messages hep boş {} kalıyor.

Dosyanın geri kalanında pattern doğru: JSON.parse(data.responseText) (line 2315, 4203, 5670).

callAjax çoğu yerde 200 + {success:false, messages:{...}} wrapper’lı endpoint’lerle çalışıyor (Laravel FormRequest kullanmayan custom controller’lar), o yüzden bug uzun süredir fark edilmemiş. Login/register tek 422 dönen flow.

2. Register form field’larının id’leri name’le eşleşmiyor

mobile/components/login-popup.blade.php register tab’ında:

  • name="name", name="email", name="phone", name="userType" — id yok
  • name="password" → id="popupRegisterPasswordInput"
  • name="kvkk_consent" → id="register-kvkk_consent"

Eski kod $$("#" + i).parent().append(err) ile field’ı arıyordu — hiçbir field bulunamıyordu, hiçbir error render edilmiyordu.

3. Dom7 1.6’da .first() ve .after() yok

İlk denemede .find('[name=...]').first() ve $input.parent().after(err) yazdım — ikisi de Dom7 1.6’da yok (bkz. 2026-04-14-dom7-vs-jquery-gotchas). Silent fail veya TypeError.

Fix

mobile/app.js:5866 loginRegisterAjax fonksiyonu:

  1. callAjax’a dokunulmadı (her yerde kullanıldığı için risk yüksek). Bunun yerine loginRegisterAjax kendi $$.ajax çağrısını yapıyor.
  2. Error branch’ta JSON.parse(xhr.responseText) ile body.errors veya body.messages parse ediliyor.
  3. Field lookup $form.find('[name="' + i + '"]').eq(0) (Dom7’de .first() yerine .eq(0)).
  4. Error eklerken native DOM API: 
    var parentEl = $input.parent()[0];
var errEl = document.createElement('div');
errEl.className = 'error-input';
errEl.setAttribute('style', 'display: block; color: #F50000; font-size: 12px; margin-top: 4px;');
errEl.textContent = msg;
parentEl.parentNode.insertBefore(errEl, parentEl.nextSibling);
    .after() yerine insertBefore(node, ref.nextSibling).
  5. Konum: $input.parent() text input için .input-container (.form-group flex-column içinde altta görünür); kvkk/marketing için .terms-container (flex container’dan dışarı, formda kardeş olarak). İçine eklersem icon kayıyor (input-container position:relative, absolute icon top:30%) ve flex layout’ta yan yana geliyordu.

Mevcut clear handler’lar (input/change event’leri) bu yeni konumu zaten temizliyor (.form-group veya .terms-container.parent() scope’unda .error-input siliyor).

Diğer dosyalardaki aynı pattern (aynı PR’da düzeltildi)

  • frontend/high-school-assistant.js:264-277 — $("#" + i) kvkk için boş, #${i}-error fallback eklendi.
  • mobile/high_school_assistant.js:401-413 — aynı.
  • frontend/scholarship.js:113-117 — 422 error branch success branch’tan farklı; kvkk için özel $("#dynamic-form #error-kvkk_consent").text(val) eklendi.
  • frontend/college-show.js:290-298 — aynı.
  • mobile/app.js:4188-4197 (dynamic-form-offer 422 branch) — aynı.

Rule

Mobile’da form 422 render ederken:

  • callAjax 422’de boş messages dönebilir; kritik formlarda $$.ajax direkt kullan, JSON.parse(xhr.responseText).
  • Field lookup’ta [name=] selector kullan (id varsayma; popup’larda id’ler standart değil).
  • Dom7 metodu kullanmadan önce 2026-04-14-dom7-vs-jquery-gotchas’a bak.
  • Error yerleşiminde .input-container (absolute icon’lu) veya .terms-container (flex) içine ekleme — sibling olarak ekle, .form-group flex-column içinde otomatik altta görünür.

Grafik Görünümü

Backlinkler