Validaciones personalizadas con wForms

20/Nov/2007 wForms , 4 Comentarios

Junto con wForms vienen predefinidas las validaciones básicas: números, fechas, direcciones de email,... pero wForms también nos da la posibilidad de hacer validaciones personalizadas.

En nuestro ejemplo vamos a definir dos validaciones. La primera será la de un código postal. La validación comprobará que sea un dígito de 5 números. La segunda validación comprobará que el texto introducido sea M o F. Intentando representar el concepto de texto.

Para hacer las validaciones personalizadas con wForms utilizamos la clase validate-custom, la cual va seguida de una expresión regular.

Hay que recordar que la expresión regular va entre dos barras invertidas (/)

/expresión_regular/

No vamos a entrar en el detalle de como se conforman las expresiones regulares en JavaScript y las diferentes estructuras que se pueden conformar. Para nuestros ejemplos las expresiones regulares que utilizaremos serán las siguientes:

  • Código Postal /d{2}/
  • Sexo /m|f|M|F/

Es por ello que nuestras clases quedarán de la siguiente forma:

<input type="text" id="cp" class="validate-custom /\d{5}/"/>
<input type="text" id="sexo" class="validate-custom /m|f|M|F/"/>

Hay que acordarse de instanciar las librerías wForms al principio de la página:

<script type="text/javascript" src="wforms.js"></script>


Visualizar el ejemplo
| Descargar el código

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

4 comentarios en “Validaciones personalizadas con wForms”

Víctor Cuervo

Edgar Hernandez

Hola, tengo un formulario con dos capas. En una capa se muestran ciertos datos y en la otra capa se muestran otros. Pero por medio de boton de opcion se elige que capa mostrar.¿ Como puedo con el wforms validar solo la capa que se está mostrando?

Víctor Cuervo

manu

¬¬ me faltó un espacio luego del nombre de la clase, por eso no funcionaba.
class=”validate-custom /\.(jpg|JPG|jpeg|JPEG)/”

Víctor Cuervo

manu

No me tomo lo que usé, debe ser por el código HTML.
Bueno usé: class=”validate-custom/\.(jpg|JPG|jpeg|JPEG)/”

Víctor Cuervo

manu

Y si quiero checkear si en un input file, el archivo a subir debe ser .jpg, cómo debería hacer?

Yo usé:

Pero no funciona
Gracias, Manu.

Los comentarios están cerrados.