رسائل خطأ مخصصة

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 6 من 27.

تساعد رسائل الخطأ المخصصة المستخدمين على فهم المشكلة في مدخلات النموذج الخاصة بهم. دعونا نتعلم كيفية إنشائها وعرضها للتحقق من صحة النموذج.

أولاً، لنقم بإنشاء حقل إدخال أساسي وعنصر span بجانبه، حيث سنعرض الرسالة:

<input type="text" id="username" placeholder="Enter username">
<span id="usernameError" class="error"></span>

الآن، دعنا نضيف JavaScript للتحقق من صحة الإدخال وعرض رسالة خطأ مخصصة:

const usernameInput = document.getElementById('username');
const usernameError = document.getElementById('usernameError');

usernameInput.addEventListener('input', function() {
    if (this.value.length < 5) {
        usernameError.textContent = "Username must be at least 5 characters long";
        usernameError.style.color = "red";
    } else {
        usernameError.textContent = "";
    }
});

عندما يكتب المستخدم في حقل الإدخال، يتحقق مستمع الأحداث (event listener) مما إذا كان اسم المستخدم يتكون من 5 أحرف على الأقل. وإذا لم يكن كذلك، فإنه يعرض رسالة خطأ باللون الأحمر.

التحدي

سهل

لدينا بالفعل صفحة تحتوي على حقل إدخال للبريد الإلكتروني ومنطقة رسائل أسفله.

مهمتك: داخل الـ event listener، أضف if–else statement تتحقق مما إذا كانت قيمة الإدخال تتضمن رمز @.

إذا كانت تتضمنه ← أظهر الرسالة "Looks good!"
بخلاف ذلك ← أظهر الرسالة "Please enter a valid email address"

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Custom error messages</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="form-container">
    <h2>Create Your Account</h2>
    <p class="subtitle">Join our newsletter for the latest updates</p>

    <form>
      <label for="email">Email Address</label>
      <input type="text" id="email" placeholder="e.g. user@example.com">
      <span id="emailError" class="message"></span>

      <button type="button">Subscribe</button>
    </form>
  </div>

  <script src="script.js"></script>
</body>
</html>