{
	"$schema": "../schemas/code-crispies-module-schema.json",
	"id": "html-forms-validation",
	"title": "Form Validation",
	"description": "Use HTML5 built-in validation for better user experience",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "required-fields",
			"title": "Required Fields",
			"description": "The <kbd>required</kbd> attribute prevents form submission if the field is empty. The browser shows a validation message automatically - no JavaScript needed!<br><br>Add it to any input that must be filled:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
			"task": "Make both the name and email fields required by adding the <kbd>required</kbd> attribute to each input.",
			"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\">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\">Submit</button>\n</form>",
			"solution": "<form>\n  <label for=\"name\">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\">Submit</button>\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "attribute_value",
					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
					"message": "Add <kbd>required</kbd> to the name input"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
					"message": "Add <kbd>required</kbd> to the email input"
				}
			]
		}
	]
}