How to use Parsley validation

parsley_es.js

// ParsleyConfig definition if not already set
window.ParsleyConfig = window.ParsleyConfig || {};
window.ParsleyConfig.i18n = window.ParsleyConfig.i18n || {};

window.ParsleyConfig.i18n.es = $.extend(window.ParsleyConfig.i18n.es || {}, {
  defaultMessage: "Este valor parece ser inválido.",
  type: {
    email:        "Ingrese un email válido.",
    url:          "Ingrese una URL válida.",
    number:       "Ingrese un número válido.",
    integer:      "Ingrese un número válido.",
    digits:       "Ingrese solo números.",
    alphanum:     "Ingrese un valor alfanumérico."
  },
  notblank:       "Este campo no debe estar en blanco.",
  required:       "Este campo es requerido.",
  pattern:        "Este campo es incorrecto.",
  min:            "Este valor no debe ser menor que %s.",
  max:            "Este valor no debe ser mayor que %s.",
  range:          "Este valor debe estar entre %s y %s.",
  minlength:      "La longitud mínima es de %s caracteres.",
  maxlength:      "La longitud máxima es de %s caracteres.",
  length:         "La longitud de este campo debe estar entre %s y %s caracteres.",
  mincheck:       "Debe seleccionar al menos %s opciones.",
  maxcheck:       "Debe seleccionar %s opciones o menos.",
  rangecheck:     "Debe seleccionar entre %s y %s opciones.",
  equalto:        "Este valor debe ser idéntico."
});

// If file is loaded after Parsley main file, auto-load locale
if ('undefined' !== typeof window.ParsleyValidator)
  window.ParsleyValidator.addCatalog('es', window.ParsleyConfig.i18n.es, true);

parsley_validation.coffee

###
Realiza la validación con parsleyjs.org
@class parsley_validation
@main default/all
@author Ana Reyna
###
yOSON.AppCore.addModule "parsley_validation", (Sb) ->
	dom = {}
	st =
		
	catchDom = ->
		
		return

	functions = 
		validate: ->
			window.ParsleyValidator.setLocale('es')
			return

	initialize = (oP) ->
		$(document).ready( () ->
			$.extend st, oP
			catchDom()
			functions.validate()
			return
		)

	return {
		init: initialize
	}

, ['dist/libs/jquery/parsley.js', 'dist/libs/jquery/parsley_es.js']

register.jade

form(method="POST", id="frmRegistration", name="frmRegistration", autocomplete="off") 
				//- data-parsley-validate="" add this attribute to the form when you don't want a custom validation
				.form_control
					label(for="txtName")
						span.required * 
						| Nombres:
					input(type="text", name="txtName", id="txtName", required="", data-parsley-trigger="change",  data-parsley-minlength="2",  data-parsley-maxlength="40", data-parsley-pattern="/^[a-z-ñáéíóúÑÁÉÍÓÚ ]+$/gi")
				.form_control
					label(for="txtLastName") 
						span.required * 
						| Apellidos:
					input(type="text", name="txtLastName", id="txtLastName", required="", data-parsley-trigger="change", data-parsley-minlength="2",  data-parsley-maxlength="50")
				.form_control
					label(for="txtEmail") 
						span.required * 
						| Email:
					input(type="text", name="txtEmail", id="txtEmail", required="", data-parsley-type="email", data-parsley-trigger="change", data-parsley-maxlength="50")
				.form_control
					label
						span.required * 
						| Contraseña:
					input(type="password", name="txtPassword", id="txtPassword1", required="", data-parsley-trigger="change", data-parsley-minlength="8",  data-parsley-maxlength="20")
				.form_control
					label
						span.required * 
						| Repetir Contraseña:
					input(type="password", name="txtRepeatPassword", id="txtRepeatPassword", required="", data-parsley-trigger="change", data-parsley-minlength="8",  data-parsley-maxlength="20", data-parsley-equalto="#txtPassword1", data-parsley-error-message="Debe ingresar la misma contraseña")
				.form_control
					label(for="selDocument") 
						span.required * 
						| Documento
					.form_control_inline 
						.form_control
							select.input_xsmall(id="selDocument", name="selDocument", required="", data-parsley-trigger="change", data-parsley-error-message="Requerido")
								option 
								option(value="1") L.E / DNI
								option(value="2") RUC
								option(value="3") Pasaporte
						.form_control
							input.input_medium(type="tel", name="txtDocument", id="txtDocument", required="", data-parsley-trigger="change")
	

				.form_control
					label(for="txtPhone1") 
						span.required * 
						| Teléfono 1:
					input(type="tel", name="txtPhone1", id="txtPhone1", required="", data-parsley-trigger="change", data-parsley-minlength="3",  data-parsley-maxlength="10")
				.form_control
					label(for="txtPhone2") Teléfono 2:
					input(type="tel", name="txtPhone2", id="txtPhone2", data-parsley-minlength="3",  data-parsley-maxlength="10")
				.form_control
					label 
						span.required * 
						| Género
					.iopinline
						label.ioption(for="radGender1")
							input(id="radGender1", name="radGender", type="radio", required="", data-parsley-trigger="change", data-parsley-errors-container="#genderError", data-parsley-error-message="Debe seleccionar una de estas opciones")
							| Masculino
						label.ioption(for="radGender2")
							input(id="radGender2", name="radGender", type="radio", required="", data-parsley-trigger="change")
							| Femenino
					span#genderError.custom_error

				.form_control
					label(for="txtAddress") 
						span.required * 
						| Dirección
					.form_control_inline 
						.form_control
							select.input_xsmall(id="selAddress", name="selAddress", required="", data-parsley-trigger="change", data-parsley-error-message="Requerido")
								option
								option Via
								option Calle
						.form_control
							input.input_medium(type="text", name="txtAddress", id="txtAddress", required="", data-parsley-trigger="change", data-parsley-maxlength="150")
				.form_control
					label(for="txtDepartment") 
						span.required * 
						| Departamento:
					select(id="selDepartment", name="selDepartment", required="", data-parsley-trigger="change")
						option
						option Lima
				.form_control
					label(for="txtProvince") 
						span.required * 
						| Provincia:
					select(id="selProvince", name="selProvince", required="", data-parsley-trigger="change")
						option Lince
				.form_control
					label(for="txtDistrict") 
						span.required * 
						| Distrito:
					select(id="selDistrict", name="selDistrict", required="", data-parsley-trigger="change")
						option Lince

				.form_control
					label.ioption.ck
						input(id="chkTerms", name="chkTerms", type="checkbox", checked="checked", required="", data-parsley-trigger="change", data-parsley-errors-container="#termsError")
						| He leído y estoy de acuerdo con los 
						a(href="javascript:;", target="_blank", title="Términos y Condiciones") Términos y Condiciones
						span#termsError
				.form_control
					label  
					button(type="submit", id="sbmRegister", class="btn btn_medium mt10", title="Registrarse") Registrarse

style.styl

@css {
	@keyframes shake {

		0% {
			transform: translate(3px, 0);
		}

		50% {
			transform: translate(-3px, 0);
		}

		100% {
			transform: translate(0, 0);
		}
	}

	@-moz-keyframes shake {

		0% {
			-moz-transform: translate(3px, 0);
		}

		50% {
			-moz-transform: translate(-3px, 0);
		}

		100% {
			-moz-transform: translate(0, 0);
		}
	}

	@-webkit-keyframes shake {
		0% {
			-webkit-transform: translate(3px, 0);
		}

		50% {
			-webkit-transform: translate(-3px, 0);
		}

		100% {
			-webkit-transform: translate(0, 0);
		}
	}

	.shake {
		animation-name: shake;
		animation-duration: 150ms;
		animation-iteration-count: 2;
		animation-timing-function: linear;
		-moz-animation-name: shake;
		-moz-animation-duration: 150ms;
		-moz-animation-iteration-count: 2;
		-moz-animation-timing-function: linear;
		-webkit-animation-name: shake;
		-webkit-animation-duration: 150ms;
		-webkit-animation-iteration-count: 2;
		-webkit-animation-timing-function: linear;
	}
}

/********************* Parsley */

input.parsley-success,
select.parsley-success,
textarea.parsley-success
	color #468847 !important
	background-color #DFF0D8 !important
	border 1px solid #a7c79b !important

input.parsley-error,
select.parsley-error,
textarea.parsley-error,
	color #B94A48 !important
	background-color #F2DEDE !important
	border 1px solid #EED3D7 !important
	
.parsley-error, .parsley-type, .parsley-required, .parsley-custom-error-message
	animation-name shake
	animation-duration 150ms
	animation-iteration-count 2
	animation-timing-function linear
	-moz-animation-name shake
	-moz-animation-duration 150ms
	-moz-animation-iteration-count 2
	-moz-animation-timing-function linear
	-webkit-animation-name shake
	-webkit-animation-duration 150ms
	-webkit-animation-iteration-count 2
	-webkit-animation-timing-function linear

.custom_error
	.parsley-errors-list
		margin-bottom 1em 
.parsley-errors-list
	margin 2px 0 3px 0
	padding 0
	list-style-type none
	font-size 0.9em
	line-height 0.9em
	opacity 0 
	-moz-opacity 0 
	-webkit-opacity 0 
	transition all .3s ease-in !important
	-o-transition all .3s ease-in !important
	-ms-transition all .3s ease-in- !important
	-moz-transition all .3s ease-in !important
	-webkit-transition all .3s ease-in !important
	&.filled
		opacity 1
	&:empty
		margin 0
	li 
		font-size 11px
		color #B94A4A

validate_registration.coffee

###
Valida el formulario de registro
@class validate_registration
@main default/registro
@author Ana Reyna
###
yOSON.AppCore.addModule "validate_registration", (Sb) ->
	console.log 'validate_registration'
	dom = {}
	st =
		txtDocument: '#txtDocument'
		selDocument: '#selDocument'
		frmRegistration: '#frmRegistration'

	catchDom = ->
		dom.txtDocument  = $(st.txtDocument)
		dom.selDocument  = $(st.selDocument)
		dom.frmRegistration  = $(st.frmRegistration)
		return

	functions = 
		validate: ->
			dom.frmRegistration.parsley()
			dom.selDocument.on 'change', ->
				dom.txtDocument.focus()
				dom.txtDocument.val('')
				switch parseInt( $(@).val())
					when 1
						dom.txtDocument.parsley().destroy()
						dom.txtDocument.attr
							'maxlength': '8'
							'data-parsley-minlength': '8'
							'data-parsley-maxlength': '8'
							'data-parsley-minlength-message': 'El DNI debe ser de 8 dígitos'
							'data-parsley-maxlength-message': 'El DNI debe ser de 8 dígitos'
							'data-parsley-type': 'digits'
							'data-parsley-type-message': 'Ingrese un DNI válido'
						dom.txtDocument.parsley()
						break
					when 2
						dom.txtDocument.parsley().destroy()
						dom.txtDocument.attr
							'maxlength': '11'
							'data-parsley-maxlength': '11'
							'data-parsley-type': 'digits'
							'data-parsley-type-message': 'Ingrese un RUC válido'
							'data-parsley-minlength-message': 'El RUC debe ser de 11 dígitos'
							'data-parsley-maxlength-message': 'El RUC debe ser de 11 dígitos'
						dom.txtDocument.parsley()
						break
					when 3
						dom.txtDocument.parsley().destroy()
						dom.txtDocument.attr
							'maxlength': '12'
							'data-parsley-minlength': '10'
							'data-parsley-maxlength': '12'
							'data-parsley-type': 'alphanum'
							'data-parsley-type-message': 'Ingrese un pasaporte válido'
							'data-parsley-minlength-message': 'Ingrese un mínimo de 10 caracteres'
							'data-parsley-maxlength-message': 'Ingrese un máximo de 12 caracteres'
						dom.txtDocument.parsley()
						break

					when 4
						dom.txtDocument.parsley().destroy()
						dom.txtDocument.attr
							'maxlength': '12'
							'data-parsley-minlength': '12'
							'data-parsley-maxlength': '12'
							'data-parsley-type': 'alphanum'
							'data-parsley-type-message': 'Ingrese un carnet de extranjería válido'
							'data-parsley-minlength-message': 'Ingrese 12 caracteres'
							'data-parsley-maxlength-message': 'Ingrese 12 caracteres'
						dom.txtDocument.parsley()
						break
			return

	initialize = (oP) ->
		$.extend st, oP
		catchDom()
		functions.validate()
		return


	return {
		init: initialize
	}

, []