En este tutorial, aprenderás varias técnicas para crear cajas de texto (input) que solo permitan la entrada de letras usando JavaScript. Vamos a cubrir tres enfoques principales con ejemplos para cada uno. Al final, te recordaremos la importancia de validar siempre en el backend por seguridad.

Técnica 1: Usar el atributo 'pattern' de HTML5

HTML5 introduce el atributo 'pattern', que permite especificar una expresión regular que debe coincidir con el valor del input para que sea considerado válido. Aquí hay un ejemplo de cómo usarlo:

<input type="text" pattern="[A-Za-z]+" title="Sólo letras permitidas">

Técnica 2: Validación con JavaScript en Eventos

Puedes usar JavaScript para validar la entrada en tiempo real utilizando eventos como 'input' o 'keypress'. Aquí hay un ejemplo que evita que se ingresen caracteres no permitidos en tiempo real:

<input type="text" id="textInput">
<script>
  document.getElementById('textInput').addEventListener('input', function (event) {
    const value = event.target.value;
    event.target.value = value.replace(/[^a-zA-Z]/g, '');
  });
</script>

Técnica 3: Validación en el Evento del Formulario

Otra forma de validar es al momento de enviar el formulario, lo cual es útil para una validación más extensiva. Aquí un ejemplo:

<form >
  <input type="text" id="textInput">
  <button type="submit">Enviar</button>
</form>
<script>
  function validateForm() {
    const value = document.getElementById('textInput').value;
    if (/[^a-zA-Z]/.test(value)) {
      alert('Solo se permiten letras');
      return false;
    }
    return true;
  }
</script>

Importancia de la Validación en el Backend

Es crucial recordar que cualquier validación en el frontend puede ser evadida por usuarios malintencionados. Por esta razón, es imprescindible realizar siempre una validación en el backend para asegurar la integridad de los datos.