Validación de Datos en JavaScript

6
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:
1. El valor de input debe ser diferente de cero.
2. El valor de input de tener un máximo de 35 caracteres.
3. 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.
4. 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>
Ejecutar
Ampliar
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>
 Ejecutar
Ampliar
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

0
Necesitas cambiar tus condiciones de la siguiente manera:

if (caja1.length >= 35)

{
alert("Sólo se permiten de 35 letras para el nombre")
return false;
}

else if (/^\s+$/.test(caja1))
{
document.getElementById("txtnombre").focus();
document.getElementById("txtnombre").style.borderColor="green";
return true;
}

else if (/^([0-9])*$/.test(caja1))
{
alert("El valor " + caja1 + " no es una letra");
document.getElementById("txtnombre").focus();
document.getElementById("txtnombre").style.borderColor="red";
return false;
}

Esto funciona, pero solo es para validar que acepte letras, letras tildadas y
espacios, el código está hecho en TypeScript

public static onlyCharacters(value: any): boolean {

let isValid = false;
value.willValidate = false;
const pattern = new RegExp('^[A-ZÁÉÍÓÚÑ ]+$', 'i');
if (pattern.test(value.key)){
isValid = true;
}
 return isValid;
}

Aplicando el siguiente código CSS se mostrará un fondo verde o rojo,

dependiendo de si cumple o no la validación, respectivamente:

input:valid, textarea:valid { background: green; }

input:invalid, textarea:invalid { background: red; }

link

Validaciones HTML5
ATRÁS HTML VALIDACIONES HTML5

Al crear un formulario en HTML, debemos ser conscientes de un detalle

ineludible: los usuarios se equivocan al rellenar un formulario. Ya sea por
equivocación del usuario, ambigüedad del formulario, o error del creador del
formulario, el caso es que debemos estar preparados y anticiparnos a estos errores,
para intentar que los datos lleguen correctamente a su destino y evitar cualquier tipo
de moderación o revisión posterior.

Para evitar estos casos, se suele recurrir a un tipo de proceso automático

llamado validación, en el cuál, establecemos unas pautas para que si el usuario
introduce alguna información incorrecta, deba modificarla o en caso contrario no
podrá continuar ni enviar el formulario correctamente.

Un esquema tradicional de validación de ejemplo podría ser el siguiente, donde

tenemos un formulario diseñado en HTML5 y mediante javascript realizamos una
validación para comprobar que los datos son correctos. Una vez superada, el
formulario se envía al back-end de la página para ser procesado y enviarlo por email
(por ejemplo).
Tipos de validación

Cada vez que creamos un formulario, la validación de los datos introducidos estará
situada en uno de los siguientes casos (colocados de peor a mejor):

1. En este primer caso, el formulario no tiene validación de ningún tipo. El

usuario puede escribir la información y el sistema no comprobará los datos, ni
realizará ningún tipo de validación. Es el peor escenario posible, puesto que el
usuario podría enviar desde información incorrecta, hasta datos
malintencionados que podrían comprometer la seguridad de la página.

2. Otro caso podría ser que el formulario tiene validación sólo en el front-
end (cliente). De esta forma, los datos son verificados en el navegador del
usuario antes de enviarse, pero carecen de validación en el back-end, por lo
que un usuario malintencionado podría eliminar la validación del front-end y
saltársela, enviando datos malintencionados que comprometan la seguridad
de la página.

3. El tercer caso posible es uno donde el formulario tiene validación sólo en el

back-end. De esta forma, garantizamos que un usuario malintencionado no
podrá eliminar el proceso de validación, y los datos siempre se comprobarán.
Sin embargo, la desventaja de este método es que el usuario puede rellenar
un formulario y es necesario que lo envíe (con la tardanza que eso puede
acarrear), se procese en el back-end y al devolver un error, el usuario tenga
que retroceder al formulario y en algunos casos, incluso tener que volver a
rellenar todos los campos de nuevo.

4. Por último, tendríamos el caso ideal, donde el formulario tiene validación en

el front-end y en el back-end, también denominado doble validación. En
este caso, el formulario es sometido a un proceso de validación en la parte del
 front-end, y si lo supera, vuelve a pasar otro proceso de validación en el back-
end. La desventaja de este método es que conlleva más trabajo de validación,
pero es el sistema recomendado, puesto que es más estricto y sobre todo,
más seguro.

Tradicionalmente, la validación de un formulario se ha hecho siempre en Javascript,

sin embargo, HTML5 introduce unos nuevos atributos para formularios que permiten
realizar la validación del formulario directamente en HTML5, sin necesidad de recurrir
a Javascript (aunque es posible hacerlo si se desea):

Recuerda siempre realizar la validación en el servidor o back-end (en rojo), ya que

puede evitar problemas graves de seguridad.

Atributos básicos

En nuestros campos de entrada de datos, se pueden utilizar ciertos atributos para

realizar validaciones sencillas. Algunos de estos atributos ya lo hemos visto en
apartados anteriores, sin embargo, vamos a comentarlos uno por uno:

Puede actuar
Atributo Valor Descripción
sobre...

Establece la longitud mínima del texto

minlength número Campos de texto
requerida.

No permite escribir textos superiores

maxlength número Campos de texto
a número carácteres.
 Puede actuar
Atributo Valor Descripción
sobre...

Campos Establece el número mínimo

min número
numéricos permitido.

Campos de
fecha Establece la fecha mínima permitida.
fecha

hora Campos de hora Establece la hora mínima permitida.

Campos Establece el número máximo

max número
numéricos permitido.

Campos de
fecha Establece la fecha máxima permitida.
fecha

hora Campos de hora Establece la hora máxima permitida.

Campos Establece el salto de números

step número
numéricos permitido. Por defecto, 1.

Campos de Establece el salto de días permitido.

fecha
fecha Por defecto, 1.

Establece el salto de segundos

hora Campos de hora
permitido. Por defecto, 1.

Campos en Campo obligatorio. Se debe rellenar

required
general para enviar formulario.

Campos en Campo desactivado. No se puede

disabled
general modificar. No se envía.

Campos en Campo de sólo lectura. No se puede

readonly
general modificar. Se envía.

Con estos atributos, podemos crear validaciones básicas en nuestros campos de

entrada de datos, obligando al usuario a rellenar un campo obligatorio, forzando a
indicar valores entre un rango numérico o permitiendo sólo textos con un tamaño
específico, entre otros.
<form name="formulario" method="post" action="/send.php">
<!-- Nombre de usuario. Obligatorio, entre 5-40 carácteres -->
Usuario:
<input type="text" name="nombre" placeholder="Por ejemplo, Juan"
minlength="5" maxlength="40" required />
<!-- Contraseña. Obligatorio, mínimo 11 carácteres -->
Password:
<input type="password" name="pass" placeholder="Contraseña"
minlength="11" required />
</form>

Además, utilizando las pseudoclases CSS de validación :valid e :invalid podemos

aplicar estilos a los campos <input> y <textarea> teniendo en cuenta su validación.
Aplicando el siguiente código CSS se mostrará un fondo verde o rojo, dependiendo
de si cumple o no la validación, respectivamente:

input:valid,
textarea:valid {
background: green;
}

input:invalid,
textarea:invalid {
background: red;
}

En el caso particular de un campo <input type="email"> se puede indicar el

atributo multiple para permitir varios emails y que valide correctamente en el caso de
estar realizando una validación HTML5.

Patrones de validación HTML5

No obstante, aunque los atributos de validación básicos son muy interesantes y

pueden facilitarnos la tarea de validación, en muchos casos son insuficientes. Para
ello tenemos los patrones de validación HTML5, mucho más potentes y flexibles,
que nos permitirán ser mucho más específicos utilizando expresiones regulares para
validar datos.
Una expresión regular es una cadena de texto que representa un posible patrón de
coincidencias, que aplicaremos mediante el atributo pattern en los campos que
queramos validar.

Para ello hay que conocer algunas características básicas de las expresiones
regulares:

Expresión Carácter
Significado Descripción
regular especial

Cualquier carácter (o texto

. Punto Comodín
de tamaño 1)

Opciones Opciones alternativas

A|B Pipe
lógicas (o A o B )

Agrupaciones alternativas
C(A|B) Paréntesis Agrupaciones
(o CA o CB )

Rangos de
[0-9] Corchetes Un dígito (del 0 al 9 )
carácteres

Una letra mayúscula de

[A-Z]
la A a la Z

Rango de Una letra que no sea

[^A-Z] ^ en corchetes
exclusión mayúscula de la A a la Z

Cierre o Un dígito repetido 0 ó más

[0-9]* Asterisco
clausura veces (vacío incluido)

Un dígito repetido 1 ó más

[0-9]+ Signo más Cierre positivo
veces

Coincidencia Cifra de 3 dígitos (dígito

[0-9]{3} Llaves
exacta repetido 3 veces)

Coincidencia Cifra de 2 a 4 dígitos (rep.

[0-9]{2,4}
(rango) de 2 a 4 veces)

Carácter El carácter b puede

b? Interrogación
opcional aparecer o puede que no

El carácter . literalmente (no

\. Barra invertida Escape
como comodín)
Ejemplos de patrones HTML5

Para clarificar estos conceptos y entenderlos mejor, vamos a mostrar algunos

ejemplos de campos con validaciones HTML5 en casos reales, y así afianzar
conceptos sobre expresiones regulares y su aplicación en los atributos pattern:

 Tipo de campo: Nombre de usuario

 Campo obligatorio: required.
 Entre 5-40 carácteres: minlength="5" maxlength="40"
 Sólo se permiten letras (mayúsculas y minúsculas) y números: pattern="[A-
Za-z0-9]+"

<form name="formulario" method="post" action="/send.php">

<!-- Nombre de usuario. Obligatorio, entre 5-40 carácteres
Sólo se permiten letras y números -->
<input type="text" name="nombre" placeholder="Su nombre de usuario"
minlength="5" maxlength="40" required pattern="[A-Za-z0-9]+" />
</form>

Nótese que de no incluir los atributos minlength y maxlength el usuario no tendría

limitación en cuanto al tamaño. Esto también puede incorporarse en la propia
expresión regular, y prescindir de dichos atributos:

<form name="formulario" method="post" action="/send.php">

<!-- Nombre de usuario. Obligatorio, entre 5-40 carácteres
Sólo se permiten letras y números -->
<input type="text" name="nombre" placeholder="Su nombre de usuario"
required pattern="[A-Za-z0-9]{5,40}"
title="Letras y números. Tamaño mínimo: 5. Tamaño máximo: 40" />
</form>

Sin embargo, en este caso, no se limitará al usuario a la hora de escribir, como

hace maxlength, sino que permitirá al usuario escribir la información que desee y en
caso de no pasar la validación, mostrará un mensaje de advertencia y no lo dejará
continuar hasta que termine. Podemos ampliar el mensaje de advertencia incluyendo
el texto en el atributo title.
Este es mi html:

<input type="text" name="folderName">

Aquí, quiero validar el valor del cuadro de texto al no permitir ingresar

caracteres especiales y espacios. Pero debería permitir subrayar.

¿Cómo validar este cuadro de texto?

Puede intentar usar esta función:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
function blockSpecialChar(e){
var k;
document.all ? k = e.keyCode : k = e.which;
return ((k > 64 && k < 91) || (k > 96 && k < 123) || k == 8 || k == 32 || (k >= 4
8 && k <= 57));
}
</script>
</head>
<body>
<form id="frm" runat="server">
<input type="text" name="folderName" onkeypress="return blockSpecialChar(event)"/>
</form>
</body>
</html>

Intenta así

$(document).ready(function () {
$("#sub").click(function(){
var fn = $("#folderName").val();
var regex = /^[0-9a-zA-Z\_]+$/
alert(regex.test(fn));
});
});

https://www.youtube.com/watch?v=Dfjtgoai9JA
Validar un número decimal con JavaScript

amos a ver cómo validar un número decimal o flotante con

JavaScript usando expresiones regulares.

En general, la expresión recular para validar un número decimal es

la siguiente:
^\d{0,M}(\.\d{1})?\d{0,N}$
Siendo:

 M: Parte entera del número (antes del punto decimal)

 n: Parte decimal del número (después del punto decimal)
 N: (n-1)

Para validar un número decimal

function validateDecimal(valor) {
var RE = /^\d*\.?\d*$/;
if (RE.test(valor)) {
return true;
 } else {
return false;
}
}

Para validar un número decimal con dos dígitos de precisión

function validateDecimal(valor) {
var RE = /^\d*(\.\d{1})?\d{0,1}$/;
if (RE.test(valor)) {
return true;
} else {
return false;
}
}
Código HTML:
Ver original

1. <!DOCTYPE html>
2. <html lang="es-ar">
3. <head>
4. <meta charset="utf-8" />
5. <title>Entero + 2 decimales</title>
6.
7. <script type="text/javascript">
8. //<![CDATA[
9. function dos_decimales(cadena){
10. var expresion=/^\d+(\.\d{0,2})?$/;
11. var resultado=expresion.test(cadena);
12. return resultado;
13. }
14. function verifica(){
15. var campo = document.getElementById('valor');
16. if(dos_decimales(campo.value) !== true){
17. alert('formato no valido');
18. }
19. }
20. //]]>
21. </script>
22. </head>
23. <body>
24. <form action="#">
25. <p>
26. <input type="text" name="valor" id="valor" /><br />
27. <input type="button" value="verifica" onclick="verifica();"/>
28. </p>
29. </form>
30. </body>
31. </html>