Para realizar la validación que necesitas puedes usar tu propia función de validación o puedes usar la validación de HTML5.
Lo que tu deseas lo puedes lograr con la validación de HTML5 sin complicarte mucho la vida, solo debes poner 3 atributos a tu etiqueta input
.
Sin embargo, ya que deseas realizar tu propia validación, aqui te muestro como podrías hacerla.
PROBLEMA
Validar un campo input
de HTML5 con las siguientes condiciones:
- El valor de
input
debe ser diferente de cero.
- El valor de
input
de tener un máximo de 35 caracteres.
- El valor de
input
sólo debe contener caracteres del alfabeto (letra 'A' hasta la 'Z', en mayúsculas y/o minúsculas. El resto de caracteres no serán válidos.
- Si el campo es válido se debe colorear el borde de verde. Si no es válido se debe colorear el borde de rojo.
SOLUCIÓN
Usando nuestra propia validación:
Para lograr lo que nos proponemos vamos a usar una expresión regular. Puedes encontrar información de expresiones regulares en JavaScript RegExp Reference.
La expresión regular que usaremos viene dada de la siguiente forma:
/^[A-Z]+$/i
Donde:
^
indica que el patrón debe iniciar con los caracteres dentro de los corchetes
[A-Z]
indica que los caracteres admitidos son letras del alfabeto
+
indica que los caracteres dentro de los corchetes se pueden repetir
$
indica que el patrón finaliza con los caracteres que están dentro de los corchetes.
i
indica que validaremos letras mayúsculas y minúsculas (case-insensitive)
Así, una posible implementación para nuestra validación sería la siguiente:
// La siguiente funcion valida el elemento input
function validar() {
// Variable que usaremos para determinar si el input es valido
let isValid = false;
// El input que queremos validar
const input = document.forms['validationForm']['letras'];
//El div con el mensaje de advertencia:
const message = document.getElementById('message');
input.willValidate = false;
// El tamaño maximo para nuestro input
const maximo = 35;
// El pattern que vamos a comprobar
const pattern = new RegExp('^[A-Z]+$', 'i');
// Primera validacion, si input esta vacio entonces no es valido
if(!input.value) {
isValid = false;
} else {
// Segunda validacion, si input es mayor que 35
if(input.value.length > maximo) {
isValid = false;
} else {
// Tercera validacion, si input contiene caracteres diferentes a los permitidos
if(!pattern.test(input.value)){
// Si queremos agregar letras acentuadas y/o letra ñ debemos usar
// codigos de Unicode (ejemplo: Ñ: \u00D1 ñ: \u00F1)
isValid = false;
} else {
// Si pasamos todas la validaciones anteriores, entonces el input es valido
isValid = true;
}
}
}
//Ahora coloreamos el borde de nuestro input
if(!isValid) {
// rojo: no es valido
input.style.borderColor = 'salmon'; // me parece que 'salmon' es un poco menos agresivo que 'red'
// mostramos mensaje
message.hidden = false;
} else {
// verde: si es valido
input.style.borderColor = 'palegreen'; // 'palegreen' se ve mejor que 'green' en mi opinion
// ocultamos mensaje;
message.hidden = true;
}
// devolvemos el valor de isValid
return isValid;
}
// Por último, nuestra función que verifica si el campo es válido antes de realizar cualquier otra acción.
function verificar() {
const valido = validar();
if (!valido) {
alert('El campo no es válido.');
} else {
alert('El campo es válido');
}
}
<form id="validationForm" name="validationForm">
<label forHTML="letras">Introduzca solo letras:</label>
<br>
<input type="text" id="letras" name="letras" onkeyup="validar()" onblur="validar()" />
<div id="message" style="position: absolute; left: 10px; top: 50px; background-color: Yellow; z-index: 10" hidden>
Introduzca solo letras (A-Z) o (a-z). Máximo 35 caracteres.
</div>
<br>
<br>
<button type="button" onclick="verificar()">Validar</button>
</form>
El código HTML que incluyo es un ejemplo básico para mostrar la validación de un campo input
usando nuestra función.
He puesto un elemento div
flotante que se oculta o se muestra según la validez del input
para mostrar un mensaje. Los estilos están "hardcodeados". Se puede realizar algo más elaborado, pero eso va más allá de la intención de este ejemplo.
Usando la validación de HTML5:
Como te comenté anteriormente, la validación en HTML5 nos alivia la tarea de tener que escribir nuestra propia validación. En la mayoría de los casos es suficiente usar la validación de HTML5. Sin embargo, habrá casos en que esta validación no será suficiente.
Para este caso en particular, HTML5 nos provee de toda la validación que requerimos, un ejemplo de cómo pudiera quedar nuestro código es como sigue:
function validar2() {
const input = document.getElementById('campo');
if(!input.checkValidity()) {
alert('El campo no es válido.');
} else {
alert('El campo es válido.');
}
}
<form id="validationHTML" name="validationHTML">
<label forHTML="campo">Introduzca solo letras:</label>
<br>
<input type="text" id="campo" name="campo" pattern="^[A-Za-z]+$" maxlength="35" required />
<button type="button" onclick="validar2()">Validar</button>
</form>
Aqui podemos ver en acción la validación de HTML5, de una manera muy básica.
Con esto solo quiero mostrar que mucha de la validación de elementos input
se la podemos dejar al navegador.
Sin embargo, si deseamos personalizar el aspecto de la validación de HTML5, tendremos que usar algo de CSS.
Espero que esto te sirva de ejemplo y te ayude a resolver tu problema.
REFERENCIAS
Javascript Validation API
HTML input Attributes
Javascript RegExp Reference
Un ejemplo de cómo podemos personalizar la validación de HTML5 usando CSS:
Styling Form Inputs Validity in CSS