jselesan/landing-2pi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed form validation

Browse Source
This commit is contained in:
Jose Selesan
2026-07-13 12:40:37 -03:00
parent 401000af97
commit c22e3fe918
2 changed files with 79 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
src/index.njk
View File

@@ -327,17 +327,20 @@ posthog.capture('$pageview');
<input type="hidden" name="_captcha" value="false">
<div class="grid gap-4 sm:grid-cols-2">
<label class="text-sm font-bold">Nombre
<input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="nombre" placeholder="Juan Pérez">
<input id="nombre" class="field mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="nombre" placeholder="Juan Pérez">
<p class="error-message hidden mt-1 text-xs text-red-500">Por favor completá tu nombre</p>
</label>
<label class="text-sm font-bold">Empresa
<input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="empresa" placeholder="Nombre de tu empresa">
<input id="empresa" class="field mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="empresa" placeholder="Nombre de tu empresa">
</label>
</div>
<label class="mt-4 block text-sm font-bold">Email corporativo
<input class="mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="email" name="email" placeholder="juan@empresa.com">
<input id="email" class="field mt-2 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" type="text" name="email" placeholder="juan@empresa.com">
<p class="error-message hidden mt-1 text-xs text-red-500">Ingresá un email válido</p>
</label>
<label class="mt-4 block text-sm font-bold">Mensaje
<textarea class="mt-2 min-h-32 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" name="mensaje" placeholder="Cuéntanos un poco sobre tu proyecto..."></textarea>
<textarea id="mensaje" class="field mt-2 min-h-32 w-full rounded-md border border-line px-4 py-3 font-normal outline-none focus:border-azure focus:ring-2 focus:ring-blue-100" name="mensaje" placeholder="Cuéntanos un poco sobre tu proyecto..."></textarea>
<p class="error-message hidden mt-1 text-xs text-red-500">Por favor completá tu mensaje</p>
</label>
<button class="btn-primary mt-5 w-full" type="submit">Enviar mensaje</button>
</form>
@@ -423,5 +426,75 @@ posthog.capture('$pageview');
})();
</script>
{% endif %}
</body>
<script>
(function() {
var form = document.querySelector('form');
if (!form) return;
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
var fields = {
nombre: { el: document.getElementById('nombre'), msg: 'Por favor completá tu nombre' },
email: { el: document.getElementById('email'), msg: 'Ingresá un email válido' },
mensaje: { el: document.getElementById('mensaje'), msg: 'Por favor completá tu mensaje' }
};
function showError(field, message) {
field.el.classList.add('border-red-500');
field.el.classList.remove('border-line');
var errorEl = field.el.parentElement.querySelector('.error-message');
if (errorEl) {
errorEl.textContent = message || field.msg;
errorEl.classList.remove('hidden');
}
}
function clearError(field) {
field.el.classList.remove('border-red-500');
field.el.classList.add('border-line');
var errorEl = field.el.parentElement.querySelector('.error-message');
if (errorEl) errorEl.classList.add('hidden');
}
function validate() {
var valid = true;
if (!fields.nombre.el.value.trim()) {
showError(fields.nombre);
valid = false;
} else {
clearError(fields.nombre);
}
if (!fields.email.el.value.trim() || !emailRegex.test(fields.email.el.value.trim())) {
showError(fields.email);
valid = false;
} else {
clearError(fields.email);
}
if (!fields.mensaje.el.value.trim()) {
showError(fields.mensaje);
valid = false;
} else {
clearError(fields.mensaje);
}
return valid;
}
form.addEventListener('submit', function(e) {
if (!validate()) {
e.preventDefault();
}
});
Object.keys(fields).forEach(function(key) {
fields[key].el.addEventListener('input', function() {
clearError(fields[key]);
});
});
})();
</script>
</body>
</html>