{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-forms-validation",
	"title": "تحقق النماذج",
	"description": "استخدم تحقق HTML5 المدمج لتجربة مستخدم أفضل",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "required-fields",
			"title": "الحقول المطلوبة",
			"description": "سمة <kbd>required</kbd> تمنع إرسال النموذج إذا كان الحقل فارغاً. يعرض المتصفح رسالة تحقق تلقائياً - بدون JavaScript!<br><br>أضفها لأي حقل يجب ملؤه:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
			"task": "اجعل كلا الحقلين (الاسم والبريد) مطلوبين بإضافة سمة <kbd>required</kbd> لكل حقل.",
			"previewHTML": "",
			"previewBaseCSS": "body { font-family: system-ui; padding: 20px; } form { max-width: 320px; } label { display: block; margin-top: 15px; margin-bottom: 5px; font-weight: 500; } label:first-of-type { margin-top: 0; } input { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box; } input:focus { outline: 2px solid steelblue; border-color: transparent; } button { margin-top: 20px; padding: 10px 20px; background: steelblue; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: 500; }",
			"sandboxCSS": "",
			"initialCode": "<form>\n  <label for=\"name\">الاسم *</label>\n  <input type=\"text\" id=\"name\" name=\"name\">\n  \n  <label for=\"email\">البريد *</label>\n  <input type=\"email\" id=\"email\" name=\"email\">\n  \n  <button type=\"submit\">إرسال</button>\n</form>",
			"solution": "<form>\n  <label for=\"name\">الاسم *</label>\n  <input type=\"text\" id=\"name\" name=\"name\" required>\n  \n  <label for=\"email\">البريد *</label>\n  <input type=\"email\" id=\"email\" name=\"email\" required>\n  \n  <button type=\"submit\">إرسال</button>\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "attribute_value",
					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
					"message": "أضف <kbd>required</kbd> لحقل الاسم"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
					"message": "أضف <kbd>required</kbd> لحقل البريد"
				}
			]
		}
	]
}