הודעות שגיאה מותאמות אישית

חלק מהיחידה JavaScript בפעולה במסלול ה-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 = "";
    }
});

כאשר משתמש מקליד בשדה הקלט, מאזין האירועים בודק אם שם המשתמש מכיל לפחות 5 תווים. אם לא, מוצגת הודעת שגיאה אדומה.

אתגר

קל

כבר יש לנו דף עם שדה קלט לכתובת האימייל ואזור להודעות מתחתיו.

המשימה שלך: בתוך מאזין האירועים, הוסף משפט if-else שבודק אם ערך הקלט כולל את הסימן <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>