Ejercicio 1: Formulario de contacto con validación simple

Ejercicio 1: Formulario de contacto con validación simple

En este ejercicio creamos un formulario básico para ingresar nombre, correo y mensaje. Validamos que no estén vacíos y que el correo contenga "@". Al enviar, muestra mensaje de éxito o error.

---

Pseudocódigo

1. Mostrar formulario con campos: Nombre, Email, Mensaje y botón Enviar. 2. Al presionar Enviar: a. Verificar que Nombre, Email y Mensaje no estén vacíos. b. Verificar que Email contenga "@" 3. Si falta algo o el correo es incorrecto, mostrar mensaje de error. 4. Si todo está bien, mostrar mensaje de agradecimiento y limpiar formulario.

---

Código HTML y JavaScript

<form id="formContacto" onsubmit="return validarFormulario()">
  <label for="nombre">Nombre:</label>
  <input type="text" id="nombre" name="nombre" />

  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" name="email" />

  <label for="mensaje">Mensaje:</label>
  <textarea id="mensaje" name="mensaje" rows="4"></textarea>

  <button type="submit">Enviar</button>
</form>

<div id="mensajeResultado"></div>

<script>
function validarFormulario() {
  const nombre = document.getElementById('nombre').value.trim();
  const email = document.getElementById('email').value.trim();
  const mensaje = document.getElementById('mensaje').value.trim();
  const resultado = document.getElementById('mensajeResultado');

  if (!nombre) {
    resultado.textContent = "Por favor, ingresa tu nombre.";
    resultado.style.color = "red";
    return false;
  }
  if (!email) {
    resultado.textContent = "Por favor, ingresa tu correo electrónico.";
    resultado.style.color = "red";
    return false;
  }
  if (!email.includes("@")) {
    resultado.textContent = "El correo electrónico debe contener '@'.";
    resultado.style.color = "red";
    return false;
  }
  if (!mensaje) {
    resultado.textContent = "Por favor, escribe un mensaje.";
    resultado.style.color = "red";
    return false;
  }

  resultado.textContent = `¡Gracias por contactarnos, ${nombre}! Responderemos pronto.`;
  resultado.style.color = "green";

  document.getElementById('formContacto').reset();

  return false;
}
</script>

---

Resultado funcional:

Nombre:


Correo electrónico:


Mensaje:

---