Skip to content

Instantly share code, notes, and snippets.

@anareyna

anareyna/parsley_es.js

Last active November 26, 2021 20:50
Show Gist options
  • Save anareyna/73da9bcdc22a1f90fc47 to your computer and use it in GitHub Desktop.
Save anareyna/73da9bcdc22a1f90fc47 to your computer and use it in GitHub Desktop.
Download ZIP
How to use Parsley validation
Raw
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);
Raw
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']
Raw
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
Raw
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
Raw
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
}
, []
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment