Validaciones personalizadas con wForms

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.

Usar la clase validate-custom

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/

Aplicar las expresiones regulares

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/"/>

Cargar las librerías wForms

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

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