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

חלק מהיחידה 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 שבודק אם ערך הקלט כולל את הסמל @.

אם כן → הצג את ההודעה “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>