אימות קלט

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 5 מתוך 27.

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

ראשית, ניצור שדה קלט טקסט בסיסי. נרצה לבדוק אם אורך שם המשתמש הוא לפחות 5 תווים.

<input type="text" id="username" placeholder="Enter username">

כעת, הוסף מאזין אירועים כדי לאמת את הקלט בזמן שהמשתמש מקליד:

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

usernameInput.addEventListener('input', function() {
    // קבל את הערך הנוכחי
    const value = this.value;
    
    // בדוק אם הוא עומד בקריטריונים שלנו
 	if (value.length < 5) {
        usernameInput.style.borderColor = "red";
      } else {
        usernameInput.style.borderColor = "green";
      }
});

המסגרת הופכת לאדומה אם שם המשתמש קצר מ־5 תווים, ולירוקה אם הוא תקין.

אתגר

קל

יש לנו דף עם שדה להזנת כתובת דוא״ל. כרגע הוא לא מאמת את הפורמט של כתובת הדוא״ל.

המשימה שלך היא להשלים את השורה בתוך בלוק ה־<strong>if</strong> הקיים כך ש:

כאשר כתובת הדוא״ל מכילה "@",
המסגרת של שדה הקלט הופכת ל־"2px solid rgb(0, 250, 0)".

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
    <title>Email Validation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <form>
            <label for="email">Email:</label>
            <input type="text" id="email" placeholder="Enter your email">
        </form>
    </div>

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