Pequeño tip en pro de seguir con las buenas prácticas.
Hace no mucho tiempo me tocó hacer una personalización en la cual el requerimiento pedía agregar una regla adicional de validación para ciertos campos del checkout.
Lo que vamos a a ver es cómo agregar reglas propias de validación haciendo uso de la clase Validation. Por supuesto, la idea es no tocar el código original agregando código en js/prototype/validation.js o dentro de un phtml (como todavía seguimos viendo incluso en extensiones pagas).
Para el ejemplo vamos a necesitar 3 archivos.
El escenario con el cual voy a trabajar será el siguiente: “Agregar una nueva validación Javascript a ciertos campos del formulario del checkout sin por esto crear un nuevo módulo” (más adelante voy a volver sobre este punto).
Lo primero que vamos a hacer es crear nuestra función javascript de validación. Dado que la regla en si misma va más allá del skin, voy a crear el archivo dentro del directorio js. En mi caso, el archivo será /js/dc/validacion.js.
Dentro del archivo, vamos a declarar una nueva regla.
Validation.add('mi-nueva-validacion', 'Mensaje de error a mostrar.', function (v) {
return /^[ INGRESAMOS NUESTRA VALIDACION ]*$/.test(v);
});El siguiente paso será lograr que el layout agregue nuestro nuevo archivo junto con todos los demás.
Para que esto suceda vamos a editar el archivo page.xml del layout de nuestro theme y agregamos dentro del nodo <default>, en la definición del bloque head, la llamada a nuestro archivo.
<default translate="label" module="page">
...
<block type="page/html_head" name="head" as="head">
...
<action method="addJs"><script>dc/validacion.js</script></action>
...
</block>
</default>Ahora ya tenemos nuestra nueva regla de validación y también el archivo javascript cargado.
Para aplicarlo, necesitamos editar el archivo phtml que contiene el input al cual buscamos agregarle la validación.
Según el ejemplo, vamos a probar con el campo Company de la sección de Billing.
Abrimos el archivo app/design/frontend/[package]/[tema]/template/checkout/onepage/billing.phtml y en la línea 47 deberíamos ver nuestro campo. Al final de la línea se indica que la única clase de este input es «input-text».
Vamos a modificar eso y agregamos, a continuación, el nombre de nuestra regla de validación.
Ahora el código de nuestro input debería verse de la siguiente forma:
<input id="billing:company" class="input-text mi-nueva-validacion" title="<?php echo $this->__('Company') ?>" type="text" name="billing[company]" value="<?php echo $this->htmlEscape($this->getAddress()->getCompany()) ?>" />Una vez que lleguemos al formulario, si ingresamos un valor no permitido, veríamos nuestro mensaje.
Aplicando estos pasos estamos obteniendo una forma bastante prolija y reutilizable de agregar validaciones para nuestros formularios.
Al comienzo dejé una aclaración con respecto al requerimiento. Esto se debe a que la forma en que estoy agregando la validación no es la única.
Si mi validación fuera sólo para el checkout, quizás lo más correcto hacer la inclusión en la definición de layout del checkout y no en page. Si creamos un módulo que necesita una validación, también podríamos hacer al inclusión en la definición de layout de ese módulo.
Lo importante es evitar ensuciar el phtml y poder reutilizar nuestro código de una forma sencilla.