Doğrulama

Zod veya Yup entegrasyonu mu arıyorsunuz? Şema Doğrulama kılavuzuna göz atın.

ViraStack Mask, React Hook Form’un doğrulamasını tamamlayan maskeleme düzeyinde doğrulamayı yönetir.

Dahili Doğrulayıcılar

ViraStack Mask, belirli formatlar için algoritmik doğrulayıcılar içerir.

Luhn Algoritması: Kredi kartı numaraları için kullanılır.
TCKN Algoritması: Türkiye Cumhuriyeti Kimlik Numaraları için kullanılır.
VKN Algoritması: Vergi Kimlik Numaraları için kullanılır.
IBAN Algoritması: Uluslararası Banka Hesap Numaraları (TR) için kullanılır.

Bunları etkinleştirmek için validate: true olarak ayarlayın ve şemanızda validator dizesini belirtin veya ilgili hazır ayarı kullanın (card, tckn, taxNumber, iban).

Doğrulama Durumuna Erişme

ViraStack Mask, React Hook Form’un doğrulama sistemiyle doğrudan entegre olur. Bir doğrulama hatası oluştuğunda, ViraStack Mask RHF’nin formState.errors nesnesine bir hata kaydeder.

aria-invalid: boolean. RHF hata durumuna göre otomatik olarak ayarlanır.


const { id } = useViraMask({ form, schema: { id: 'tckn' } });
 
return (
  <div>
    <input {...id} className={form.formState.errors.id ? 'error' : ''} />
    {form.formState.errors.id && <span>Geçersiz Kimlik</span>}
  </div>
);

React Hook Form ile Entegrasyon

ViraStack Mask, RHF form durumunu günceller. ViraStack Mask’ın maskelemesini RHF’nin kurallarıyla birleştirebilirsiniz.


<input 
  {...cc} 
  {...form.register('cc', { required: true, minLength: 16 })} 
/>

Not: useViraMask dahili olarak register’ı çağırdığı ve propları döndürdüğü için, ekstra RHF seçenekleri eklemediğiniz sürece genellikle register’ı tekrar çağırmanıza gerek yoktur. Yaparsanız, ref’leri doğru bir şekilde birleştirdiğinizden emin olun veya gelecekteki sürümlerde destekleniyorsa RHF seçeneklerini useViraMask’a geçirin (şu anda kayıt işlemini useViraMask yönetmektedir).

En İyi Pratik: Maskeleme ve anında görsel doğrulama geri bildirimi (kırmızı kenarlıklar gibi) için useViraMask’a güvenin ve form gönderimini engelleme ve hata mesajları için RHF’nin formState.errors nesnesini kullanın.