اعتبارسنجی فرم ها در HTML

اعتبارسنجی فرم‌ها در HTML به کمک ویژگی‌ها و خصوصیات مختلف انجام می‌شود. این اعتبارسنجی می‌تواند قبل از ارسال فرم به سرور، اطمینان حاصل کند که داده‌های وارد شده صحیح هستند. اعتبارسنجی می‌تواند شامل بررسی نوع داده‌ها، طول ورودی‌ها، مقادیر پیش‌فرض و غیره باشد.

1. ویژگی‌های اعتبارسنجی HTML5:

در HTML5، ویژگی‌های مختلفی برای اعتبارسنجی فرم‌ها به صورت پیش‌فرض در اختیار شما قرار می‌گیرد:

الف) required:

این ویژگی برای اجباری کردن فیلدها استفاده می‌شود، یعنی کاربر باید مقداری وارد کند تا فرم ارسال شود.

<input type="text" id="name" name="name" required>

ب) type:

برای تعیین نوع داده‌هایی که باید وارد شوند، مانند ایمیل، شماره تلفن، URL و غیره.

ایمیل:

undefined

<input type="email" id="email" name="email" required>

مرورگر به‌طور خودکار بررسی می‌کند که آیا ایمیل وارد شده درست است یا نه.
عدد:

undefined

<input type="number" id="age" name="age" min="18" max="100" required>
URL:

undefined

<input type="url" id="website" name="website" required>

ج) min و max:

این ویژگی‌ها برای تنظیم محدودیت‌های مقدار عددی یا طول رشته‌ها استفاده می‌شوند.

<input type="number" id="age" name="age" min="18" max="100" required>

د) pattern:

با استفاده از این ویژگی می‌توانید الگوی خاصی (regular expression) را برای ورودی تعیین کنید. این ویژگی به ویژه برای اعتبارسنجی ورودی‌های متنی مانند کد پستی یا شماره تلفن مفید است.

<input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required>

در اینجا، فقط شماره‌های تلفن با الگوی xxx-xxx-xxxx معتبر خواهند بود.

هـ) minlength و maxlength:

این ویژگی‌ها برای تعیین حداقل و حداکثر طول ورودی‌های متنی استفاده می‌شوند.

<input type="text" id="username" name="username" minlength="5" maxlength="15" required>

2. استفاده از ویژگی‌های HTML5 در فرم‌ها:

<form>

  <label for="email">ایمیل:</label>

  <input type="email" id="email" name="email" required><br><br>

  <label for="age">سن:</label>

  <input type="number" id="age" name="age" min="18" max="100" required><br><br>

  <label for="phone">شماره تلفن:</label>

  <input type="text" id="phone" name="phone" pattern="\d{3}-\d{3}-\d{4}" required><br><br>

  <label for="password">پسورد:</label>

  <input type="password" id="password" name="password" minlength="8" required><br><br>

  <button type="submit">ارسال</button>

</form>

3. اعتبارسنجی سفارشی با جاوااسکریپت:

گاهی اوقات ممکن است بخواهید اعتبارسنجی خاصی انجام دهید که در HTML5 موجود نباشد یا رفتار دلخواه شما را برآورده نکند. در این صورت می‌توانید از جاوااسکریپت برای اعتبارسنجی فرم استفاده کنید.

مثال از اعتبارسنجی با جاوااسکریپت:

<form id="myForm">

  <label for="email">ایمیل:</label>

  <input type="email" id="email" name="email"><br><br>

  <label for="age">سن:</label>

  <input type="number" id="age" name="age"><br><br>

  <button type="submit">ارسال</button>

</form>

<script>

  document.getElementById("myForm").onsubmit = function(event) {

    // اعتبارسنجی ایمیل

    var email = document.getElementById("email").value;

    if (email === "") {

      alert("لطفا ایمیل را وارد کنید");

      event.preventDefault(); // جلوگیری از ارسال فرم

      return false;

    }

    // اعتبارسنجی سن

    var age = document.getElementById("age").value;

    if (age < 18 || age > 100) {

      alert("سن باید بین 18 تا 100 باشد");

      event.preventDefault(); // جلوگیری از ارسال فرم

      return false;

    }

    return true;

  }

</script>

در این مثال، اعتبارسنجی ایمیل و سن با استفاده از جاوااسکریپت انجام می‌شود. اگر ورودی‌ها صحیح نباشند، فرم ارسال نمی‌شود و پیامی به کاربر نمایش داده می‌شود.

4. پشتیبانی از بازخوردها و پیام‌ها:

مرورگرها به‌طور خودکار بازخوردهایی را هنگام وقوع خطاهای اعتبارسنجی نمایش می‌دهند. اما شما می‌توانید پیام‌های سفارشی خود را با استفاده از ویژگی setCustomValidity در جاوااسکریپت تعیین کنید.

5. استفاده از novalidate:

در صورتی که بخواهید اعتبارسنجی خودکار مرورگر را غیرفعال کنید (مثلاً اگر از جاوااسکریپت برای اعتبارسنجی استفاده می‌کنید)، می‌توانید ویژگی novalidate را به تگ <form> اضافه کنید.

<form novalidate>

  <!-- فرم شما -->

</form>

با این ویژگی‌ها، می‌توانید اعتبارسنجی‌های قوی و کارآمد برای فرم‌های خود ایجاد کنید و تجربه کاربری بهتری فراهم کنید.