Validar solo letras en Javascript y Estilizar Campos de Formulario

Cómo Validar Solo Letras en un Campo de Texto con Javascript y Cambiar el Color del Borde

Al diseñar formularios en una aplicación web, se presenta a menudo la necesidad de validar los datos que el usuario ingresa. Un caso común es asegurarse de que un campo de texto contenga únicamente letras. Además, para mejorar la experiencia del usuario, es útil que el campo de texto cambie su apariencia visual, por ejemplo, que el borde se coloree de rojo o verde para indicar si el dato ingresado es inválido o válido respectivamente. En este artículo, vamos a explorar cómo implementar esta funcionalidad utilizando JavaScript y expresiones regulares.

Problema a Resolver

El problema en cuestión involucra realizar la validación de un campo de texto dentro de nuestra aplicación web. La validación debe cumplir con las siguientes condiciones: el valor del campo de texto debe ser diferente de cero, es decir, no debe estar vacío; el valor debe tener un máximo de 35 caracteres; y solo debe contener caracteres alfabéticos, ya sean en mayúsculas o minúsculas. Si el contenido del campo de texto es válido, queremos que su borde se coloree de verde, y si no lo es, de color rojo. Este tipo de validación no solo mejora la retroalimentación visual al usuario sino también previene la entrada de datos incorrectos a nuestros sistemas.

Solución Utilizando Javascript

Validación Personalizada Mediante Expresiones Regulares

Para validar el formato de los datos de entrada de un campo de texto en JavaScript, una herramienta potente y flexible que tenemos a disposición son las expresiones regulares. Permiten definir un patrón de búsqueda complejo que podemos aplicar a las cadenas de texto con el fin de verificar si se ajustan o no a ciertos criterios establecidos. En nuestro caso, el patrón a definir debe permitir únicamente letras.

A continuación se muestra un ejemplo de código que demuestra cómo realizar la validación de un campo de texto para que solo acepte letras y cómo cambiar el color del borde de dicho campo dependiendo de si la entrada es válida o no.

function validarNombreCampo() {
    var campoTexto = document.getElementById('campoNombre');
    var valorCampoTexto = campoTexto.value;
    var expresionRegular = /^[A-Za-z]+$/;

    if(valorCampoTexto.match(expresionRegular) && valorCampoTexto.length <= 35) {
        campoTexto.style.borderColor = 'green';
        return true;
    } else {
        campoTexto.style.borderColor = 'red';
        return false;
    }
}

Explicación del código: La función `validarNombreCampo` primero obtiene el elemento del DOM que representa nuestro campo de texto. Luego, define una expresión regular que solo permite letras – esto es lo que se simboliza entre los corchetes y el signo más (`+`), que significa ‘uno o más’ de los caracteres anteriores. La verificación se realiza invocando el método `match` del objeto `String`, que retorna `true` si encuentra una coincidencia entre el texto y la expresión regular. Si la entrada del usuario cumple con la expresión regular y no supera los 35 caracteres, el borde del campo de texto se coloreará de verde; en caso contrario, se coloreará de rojo.

Uso de la Validación Incorporada en HTML5

HTML5 ofrece la validación de campos de formulario como parte de su estándar con atributos como `pattern` y `maxlength` que se pueden aplicar directamente a las etiquetas de input. A continuación, un ejemplo de cómo se podría utilizar la validación de HTML5:

<input type='text' id='campoNombre' pattern='[A-Za-z]{1,35}' title='Introduzca solo letras. Máximo 35 caracteres.' required />

Explicación del código: El atributo `pattern` contiene la misma expresión regular que usamos previamente en JavaScript. La validación de HTML5 activará automáticamente el mensaje de título como una sugerencia de herramienta cuando el campo no sea válido y evitará que el formulario se envíe. Si bien esto facilita la validación sin escribir código JavaScript, para cambiar la apariencia visual del campo según su validez aún necesitamos un poco de código, que podría realizarse con la ayuda de CSS y oyentes de eventos de JavaScript para aplicar los estilos deseados.

Personalización del Estilo de los Campos Validados

Aunque la validación de HTML5 es potente, es posible que queramos personalizar aún más el estilo visual de los campos basado en su validez. Esto lo podemos hacer mediante CSS y JavaScript para cambiar dinámicamente los estilos aplicados a los elementos del formulario. A continuación, presento un pequeño código que muestra cómo cambiar el color del borde al perder el foco del campo en caso de ser inválido, imitando el comportamiento mencionado al principio del artículo:

campoTexto.addEventListener('blur', function(event) {
    if(!this.checkValidity()) {
        this.style.borderColor = 'red';
    } else {
        this.style.borderColor = 'green';
    }
});

Explicación del código: En el evento `blur`, que sucede cuando el campo pierde el foco, se verifica la validez del campo usando el método `checkValidity`. Si el campo no es válido, se establece el borde en color rojo, y si lo es, en color verde.

Conclusión

A través de este tutorial, hemos aprendido cómo validar campos de texto para solo aceptar letras en JavaScript y cómo cambiar el estilo de dichos campos para mejorar la experiencia del usuario. Ambas técnicas presentadas, usando expresiones regulares y validación de HTML5, son herramientas valiosas para cualquier desarrollador web que desee asegurarse de que los datos ingresados ​​en un formulario cumplan con criterios específicos de validación. Además, personalizar el estilo de los campos proporciona retroalimentación visual inmediata, lo que resulta en una interfaz más amigable e intuitiva.

Te puede interesar

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *