فرم‌های بومی و اعتبارسنجی

<form id="booking-form">
  <label for="arrival">تاریخ ورود</label>
  <intl-datepicker id="arrival" name="arrival" locale="en-GB"
    value="2026-03-15" min="2026-03-01" max="2026-03-31"
    required></intl-datepicker>
  <button type="submit">خواندن رزرو</button>
  <button type="reset">بازنشانی</button>
</form>
<output id="booking-result"></output>

import 'intl-datepicker';

const form = document.querySelector('#booking-form');
const output = document.querySelector('#booking-result');
form.addEventListener('submit', (event) => {
  event.preventDefault();
  if (!form.reportValidity()) return;
  output.textContent = new FormData(form).get('arrival') ?? '';
});

<intl-datepicker name="arrival" value="2026-03-15">
  <input slot="input" type="text" aria-label="تاریخ ورود" readonly>
</intl-datepicker>

<label for="arrival-display">تاریخ ورود</label>
<input id="arrival-display" type="text" readonly>
<intl-datepicker for="arrival-display" name="arrival"
  locale="en-GB" value="2026-03-15"></intl-datepicker>

import 'intl-datepicker';

const picker = document.querySelector('intl-datepicker');
document.querySelector('#arrival-display').value = picker.displayValue;

⁅مقدار قابل پردازش را با formdata خواند و انتخاب الزامی و بازنشانی را مدیریت کرد این عنصر به فرم متصل شد برای ارسال value قابل پردازش name را روی خود انتخابگر گذاشت برچسبی که به id آن ان اشاره کرد ورودی داخلی را نامگذاری نام گذاری کرد form id booking form label for arrival تاریخ ورود label intl datepicker id arrival name arrival locale en gb value 2026 03 15 min 2026 03 01 max 2026 03 31 required intl datepicker button type submit خواند رزرو button button type reset بازنشانی button form output id booking result output import intl datepicker const form document queryselector booking form const output document queryselector booking result form addeventlistener submit event event preventdefault if form reportvalidity return output textcontent new formdata form get arrival ارسال انتخاب اولیه 2026 03 15 را نشان داد و درخواست شبکه شبک نفرستاد ارسال تعاملی بومی پیش از رویداد submit اعتبارسنجی کرد بررسی صریح در نمونه نیاز به اعتبارسنجی در خواند داد با کد را هم روشن کرد خود new formdata form هرگز اعتبارسنجی نکرد هنگا پردازش داد در سرور دوباره آن ان را بررسی کرد مقدار خالی هیچ مدخلی به فرم اضافه نکرد حتی مدخلی با رشت خالی کنترل disabled از جمله در fieldset غیرفعال ارسال نشد بدون name هم فیلد نامداری نام داری وجود نداشت این رفتار به پشتیبانی مرورگر از عنصر سفارشی متصل به فرم وابست است کتابخانه ورودی مخفی جایگزین نداشت برای بررسی picker checkvalidity و برای درخواست نمایش پیام مرورگر picker reportvalidity را فراخوانی کرد validity validationmessage willvalidate و form وضعیت elementinternals را در اختیار گذاشت بررسی به این ترتیب انجا شد وضعیت پرچم کلید متن متن تایپشد تایپ شد نامعتبر یا تاریخ غیرمجاز badinput invaliddate dateunavailable یا متن خطا بازه مقدار خالی الزامی valuemissing pleaseselectdate بازه الزامی بدون پایان valuemissing rangeincomplete زود از حداقل یا دیر از حداکثر rangeunderflow یا rangeoverflow datetooearly یا datetoolate روز غیرفعال یا بازه غیرمجاز customerror dateunavailable یا rangeunavailable شب کمتر یا بیشتر از حد tooshort یا toolong rangetooshort یا rangetoolong مقدار تنظیمشد تنظی شد با کد حتی در صورت نامعتبر بود حفظ شد ابتدا حد تاریخ سپس دسترسپذیری دسترس پذیری روز و بعد طول بازه بررسی شد قاعده روزانه تکتک تک تک روز روزه هفته ماه یا سال را اعتبارسنجی نکرد max dates محدودیت اختصاص مقدار و تعامل است و پرچم اعتبارسنجی نداشت بازه الزامی بدون پایان همچن با تاریخ شروع در formdata حاضر است اعتبارسنجی آن ان را رد کرد نه استخراج داد بدون required شروع در انتظار توانست معتبر بود برنامه شما بایست درباره پذیرفت بازه ناقص تصمیم گرفت قاعده بازه را دید form reset مقدار attribute فعلی value را برمیگرد رمید گرداند و اگر attribute وجود نداشت بود انتخاب را خالی کرد تغییر value setvalue یا انتخاب کاربر پیشفرض پیش فرض بازنشانی را عوض نکرد تغییر attribute آن ان را عوض کرد بازنشانی خطا تایپ را پاک کرد و intl change نفرستاد disabled باز شد را مسدود و ورودی داخلی را غیرفعال کرد fieldset غیرفعال از طریق callback بومی فرم مدیریت شد readonly تایپ در ورودی داخلی و باز شد عادی از آن ان را مسدود کرد اما تضمینی برای تغییرناپذیری از طریق کد یا ورودی سفارشی نیست در پیادهسازی پیاد سازی فعلی حالت درونصفحه درونصفح درون صفحه و ورودی خارجی محدودیت در رعایت readonly داشت رفع شکل را دید ورودی داخلی کامل اتصال صفحهکل صفحه کلید نامگذاری نام گذاری و نمایش خطا را داشت توانست آن ان را با ورودی slot جایگزین کرد intl datepicker name arrival value 2026 03 15 input slot input type text aria label تاریخ ورود readonly intl datepicker به ورودی slot همان نام فرم را نداد آن ان ورودی متن محلی نشان داد در حالی که میزبان مقدار iso را فرستاد برچسب و وضعیت disabled و readonly آن ان را خود تنظی کرد کامپوننت همه ویژگی aria ورودی داخلی را به ورودی سفارشی منتقل نکرد با allow input ورودی slot توانست تاریخ تایپشد تایپ شد را ثبت کرد اگر تایپ خواست readonly خود ورودی را بردار یک ورودی موجود هم توانست با for انتخابگر را باز کرد label for arrival display تاریخ ورود label input id arrival display type text readonly intl datepicker for arrival display name arrival locale en gb value 2026 03 15 intl datepicker اینجا for شناسه ورودی خارجی است و ورودی داخلی انتخابگر پنه شد پس از تغییر انتخاب ورودی خارجی متن محلی را نشان داد این اتصال برای باز کرد و نمایش است و واسط کامل تایپ دوطرفه یا دسترسپذیری دسترس پذیری نیست allow input پردازشگر پردازشگره تایپ و صفحهکل صفحه کلید داخلی را به آن ان وصل نکرد متن موجود ورودی ممکن است هنگا اتصال تجزیه شد اما مقدار اولیه میزبان همیشه در نخست اتصال به ورودی منتقل نشد در صورت نیاز نمایش اولیه را صریح تنظی کرد import intl datepicker const picker document queryselector intl datepicker document queryselector arrival display value picker displayvalue name را روی انتخابگر نگه داشت و رفتار تکمیلی ورودی خارجی را در برنامه پیاد کرد برای کاربرد معمول فرم نمونه اول مناسب است⁆

⁅فرم بومی و اعتبارسنجی⁆

⁅ارسال تاریخ انتخابشدهاعتبارسنجیبازنشانی انتخاب شدهاعتبارسنجیبازنشانی و وضعیت غیرفعالورودی سفارشی⁆