{
	"$schema": "../../schemas/code-crispies-module-schema.json",
	"id": "html-forms-validation",
	"title": "Validación de formularios",
	"description": "Usa la validación integrada de HTML5 para mejor experiencia de usuario",
	"mode": "html",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "required-fields",
			"title": "Campos requeridos",
			"description": "El atributo <kbd>required</kbd> evita el envío del formulario si el campo está vacío. ¡El navegador muestra un mensaje de validación automáticamente - sin JavaScript!<br><br>Añádelo a cualquier campo que deba rellenarse:<br><kbd>&lt;input type=\"text\" required&gt;</kbd>",
			"task": "Haz que ambos campos (nombre y email) sean requeridos añadiendo el atributo <kbd>required</kbd> a cada campo.",
			"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\">Nombre *</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\">Enviar</button>\n</form>",
			"solution": "<form>\n  <label for=\"name\">Nombre *</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\">Enviar</button>\n</form>",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "attribute_value",
					"value": { "selector": "input[name='name']", "attr": "required", "value": true },
					"message": "Añade <kbd>required</kbd> al campo de nombre"
				},
				{
					"type": "attribute_value",
					"value": { "selector": "input[name='email']", "attr": "required", "value": true },
					"message": "Añade <kbd>required</kbd> al campo de email"
				}
			]
		}
	]
}