رسائل الخطأ المخصصة
جزء من قسم 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>
اختبر نفسكيتضمن هذا الدرس اختبارًا قصيرًا. ابدأ الدرس للإجابة عليه وتتبّع تقدمك.
جميع دروس JavaScript قيد التطبيق
1التفاعلية/مكوّنات واجهة المستخدم
علامات التبويبأكورديون (توسيع/طي)نافذة منبثقة (فتح/إغلاق)قائمة منسدلةتدرّب بنفسك: Playground لـ Web