{
	"$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": "Зробіть обидва поля (ім'я та email) обов'язковими, додавши атрибут <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\">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\">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> до поля email"
				}
			]
		}
	]
}