مرورگرها به صورت پیش‌فرض دارای HTML Form Validation هستند.
با استفاده از Validation API در جاوااسکریپت می‌توانیم بررسی کنیم که آیا داده‌های ورودی فرم معتبر هستند یا نه.

🔹 1. ویژگی‌های Validation API

هر عنصر فرم (مثل <input>) دارای یک شیء validity است که وضعیت اعتبار ورودی را نشان می‌دهد.

let input = document.getElementById("myInput");
console.log(input.validity);

📌 خروجی شامل ویژگی‌هایی مثل:

• valueMissing → اگر فیلد اجباری خالی باشد

• typeMismatch → اگر نوع داده درست نباشد (مثلاً ایمیل نادرست)

• patternMismatch → اگر داده با الگوی regex مطابقت نداشته باشد

• tooLong / tooShort → طول داده نامعتبر باشد

• rangeOverflow / rangeUnderflow → عدد از محدوده خارج باشد

• stepMismatch → مقدار با step تعریف‌شده سازگار نباشد

• valid → اگر ورودی کاملاً معتبر باشد

🔹 2. متدهای Validation API

🟢 ()checkValidity

بررسی می‌کند که آیا مقدار ورودی معتبر است یا خیر.

let input = document.getElementById("myInput");

if (input.checkValidity()) {
  console.log("Valid!");
} else {
  console.log("Invalid!");
}

🟢 ()reportValidity

مانند checkValidity() است، اما اگر ورودی نامعتبر باشد، پیام خطا را هم نمایش می‌دهد.

document.getElementById("myInput").reportValidity();

🟢 ()setCustomValidity

برای تعریف پیام خطای دلخواه.

let input = document.getElementById("myInput");

if (input.value.length < 5) {
  input.setCustomValidity("حداقل ۵ کاراکتر وارد کنید.");
} else {
  input.setCustomValidity("");
}

🔹 3. مثال کامل

<form>
  <input id="email" type="email" required>
  <button type="submit">ارسال</button>
</form>

<script>
let email = document.getElementById("email");

email.oninput = function() {
  if (!email.checkValidity()) {
    email.setCustomValidity("لطفاً یک ایمیل معتبر وارد کنید.");
  } else {
    email.setCustomValidity("");
  }
};
</script>

✅ خلاصه

• validity → شامل وضعیت‌های مختلف اعتبار

• ()checkValidity → بررسی اعتبار بدون پیام خطا

• ()reportValidity → بررسی اعتبار + نمایش پیام خطا

• setCustomValidity(msg) → تعیین پیام خطای سفارشی