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

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

تساعد رسائل الخطأ Custom المستخدمين على فهم المشكلة في إدخال form الخاص بهم. لنتعلّم كيفية Create وdisplay هذه الرسائل من أجل form validation.

أولًا، لننشئ حقل input أساسيًا وspan بجواره، حيث سنعرض message:

<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 = "";
    }
});

عندما يكتب user في حقل input، يتحقق مستمع الأحداث مما إذا كان username يتكون من least 5 characters long. وإذا لم يكن كذلك، فإنه يعرض red error message.

التحدي

سهل

لدينا بالفعل صفحة تحتوي على حقل input لـ email ومنطقة message أسفله.

مهمتك: داخل مستمع الحدث، أضف عبارة if-else تتحقق مما إذا كانت قيمة input تتضمن الرمز <strong>@</strong>.

إذا كانت تتضمنه → اعرض الرسالة “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>