PiaMask.js

Sade, Güçlü ve Sıfır Bağımlılık İçeren Form Doğrulama Aracı

Kurulum ve Başlangıç Rehberi

PiaMask, Bootstrap 5'in yerleşik is-invalid ve is-valid sınıflarını kullanarak çalışır. Kurulum saniyeler sürer.

1 Bağımlılıkları Ekleyin

Projelerinizin `<head>` etiketine Bootstrap 5 CSS dosyasını, sayfanın en altına ise PiaMask.js'i ekleyin.

<!-- 1. Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 2. PiaMask JS (Body sonuna) -->
<script src="piamask.js"></script>
2 Form ve Input Ayarları

HTML formunuza novalidate niteliğini verin. Ardından inputları data nitelikleriyle zenginleştirin.

<form novalidate>
    <input type="email" class="form-control"
           data-pia-required="true" 
           data-pia-msg-required="E-posta boş olamaz">
    <button type="submit" class="btn btn-primary">Gönder</button>
</form>
1. Standart Girişler ve Karakter Sayacı

Maskesiz, standart HTML5 elementleri. Textarea için data-pia-counter="true" kullanarak sayaç eklendi. (Max sınırı geçilemez)

<textarea class="form-control" rows="3"
  data-pia-required="true"
  data-pia-min="20"
  data-pia-max="100"
  data-pia-counter="true"
  data-pia-msg-invalid="Açıklama 20 ile 100 karakter arasında olmalıdır."
  placeholder="En az 20, en fazla 100 karakter..."></textarea>
2. TCKN ve VKN (Sayaçlı Maskeleme)

Rakam maskeli inputlarda otomatik sayaç sadece temiz (rakam) değerleri sayar.

<input type="text" class="form-control" 
  data-pia-mask="tckn"
  data-pia-max="11" 
  data-pia-counter="true"
  data-pia-required="true">
<input type="text" class="form-control" 
  data-pia-mask="numeric"
  data-pia-min="10" 
  data-pia-max="11" 
  data-pia-counter="true">
3. Para Birimi (Akıllı Kuruş Dönüşümü)

Numpad noktasını (.), ondalık virgüle (,) çevirir. Sade tasarımla sunulmuştur. Butonlarla dışarıdan veri atamayı test edebilirsiniz.

₺ 
<div class="input-group">
  <input type="text" class="form-control text-end" 
         id="salaryInput"
         data-pia-mask="currency" 
         data-pia-required="true"
         placeholder="0,00">
  <span class="input-group-text bg-light text-dark">₺</span>
</div>

<script>
  // Dışarıdan değer atamak ve formatı tetiklemek için:
  const input = document.getElementById('salaryInput');
  input.value = "1251,75";
  input.dispatchEvent(new Event('input')); // Formatla
  input.dispatchEvent(new Event('blur'));  // Doğrula (Validasyon)
</script>
4. Gelişmiş Tarih ve Zaman

Tarihlerde min/max sınırı ve 4 haneli yıl kilidi ile güvenli veri girişi.

<input type="datetime-local" class="form-control"
  data-pia-required="true"
  min="2024-01-01T00:00" 
  max="9999-12-31T23:59"
  data-pia-msg-invalid="Lütfen doğru sınırlar içinde (min 2024) bir tarih seçin.">
5. Telefon Numarası Formatları

Standart veya ülke kodlu kullanım. Ülke kodlu yapıda name nitelikleriyle veriyi backend'e rahatça aktarabilirsiniz.

<div class="input-group">
  <select class="form-select bg-light" name="country_code" style="max-width: 90px; cursor: pointer;">
    <option value="+90" selected>+90</option>
    <option value="+49">+49</option>
    <option value="+1">+1</option>
    <option value="+44">+44</option>
  </select>
  <input type="text" class="form-control" name="phone_number"
    data-pia-mask="phone" 
    data-pia-required="true"
    placeholder="(5XX) XXX XX XX">
</div>

<!-- Form post edildiğinde backend'e iki ayrı veri gider: -->
<!-- country_code="+90" -->
<!-- phone_number="(555) 123 45 67" -->

Aşağıdaki butona basarak form gönderimini test edebilirsiniz. Sayaçlar ve validasyonlar aynı anda çalışır.