Enhanced Form: اعتبارسنجی فارسی
با افزودن data-validate به <form>، اعتبارسنجی Native مرورگر با پیام‌های فارسی، اعتبارسنج‌های ایرانی و نرمال‌سازی ارقام کامل می‌شود. بدون این صفت، فرم دقیقاً رفتار معمول مرورگر را دارد.
<form data-validate ui="stack" id="demo-form" style="max-inline-size:26rem">
<label ui="field"><span>نام کامل</span><input name="name" required minlength="3" autocomplete="name"></label>
<label ui="field"><span>کد ملی</span><input name="nid" inputmode="numeric" maxlength="10" required data-validate="national-id" data-normalize="digits" class="ltr" dir="ltr"><small>ارقام فارسی خودکار به انگلیسی تبدیل می‌شوند.</small></label>
<label ui="field"><span>موبایل</span><input name="mobile" type="tel" inputmode="tel" required data-validate="mobile" data-normalize="digits" class="ltr" dir="ltr" placeholder="09123456789"></label>
<label ui="field"><span>ایمیل</span><input name="email" type="email" autocomplete="email" class="ltr" dir="ltr"></label>
<div ui="cluster"><button ui="primary" type="submit">ثبت‌نام</button><button ui="ghost" type="reset">پاک کردن</button></div>
</form>خطا بعد از ترک فیلد یا هنگام ارسال نمایش داده می‌شود، با aria-invalid و aria-describedby به فیلد وصل است و فوکوس به اولین فیلد نامعتبر می‌رود. بعد از نمایش خطا، با هر تایپ دوباره بررسی می‌شود. رویدادها: bana:form-invalid (با e.detail.fields) و bana:form-valid (پیش از ارسال؛ برای ارسال با fetch آن را preventDefault کنید).
| صفت | کار |
|---|---|
| data-validate="national-id" | بررسی ارقام کنترلی کد ملی. |
| data-validate="mobile" | موبایل ایران (با 0، 98+ یا 0098). |
| data-validate="postal-code" | کد پستی ۱۰ رقمی. |
| data-normalize="digits fa trim" | تبدیل ارقام، تبدیل ي/ك عربی به ی/ک و حذف فاصله‌های دو سر. |
| data-error="…" | پیام خطای اختصاصی برای همان فیلد. |
اعتبارسنجی سمت کلاینت جایگزین سرور نیست.همه مقدارها را در سرور هم بررسی کنید. پیام‌ها در
Bana.form.messages قابل تغییرند (مثلاً برای زبان دیگر).