Skip to content

Instantly share code, notes, and snippets.

@k1000
Created February 17, 2011 12:46
Show Gist options
  • Save k1000/831653 to your computer and use it in GitHub Desktop.
Save k1000/831653 to your computer and use it in GitHub Desktop.
simple and extensible jquery validation based on class name of the input element
/* ------------------------------------------------------
ver: 0.1
Validación de formularios con el soporte para NET
----------------------------------------------------------
autor Kamil Selwa 09.03.2010
----------------------------------------------------------
requiere jquery > 1.2.3 http://jquery.com
-----------------------------------------------------------
soportadas reglas de validación:
required
email
date
int
float
number
alpha
Validator solo validará las reglas que poseen mensages de error en errorMessages.
-----------------------------------------------------------
USO:
* Añadir nombre de regla en la clase de elemento del formulario ej:
<input id="email" class="required email" ></input>
* Elemanto de formulario debe estar dentro de label con el span adelante ej:
<label for="fecha">
<span>Fecha:</span>
<input id="fecha" class="required date" ></input>
</label>
* inicialización ej:
var errorMessages = {
email:"el email no valido",
required:"este campo es obligatorio
}
submitOnValidation(form, live) // form - [string] elemato contenedor del formulario ej: "fielset" o "form"
// live - [boolean] para validación en directo ej; true
--------------------------------------------------------
MODIFICACIONES
* Para añadir reglas adicionales:
añadir nombre de regla con el mensage al errorMessages ej:
errorMessages.nombre_regla = "mensaje de error"
añadir regla ej:
rules.nombre_regla = { test:function(e) { return ( e == 5 ) } }
* Para cambiar aspecto de validación sobrescribr function startValidation y validateFiled
--------------------------------------------------------*/
var errorMessages = {}
var rules = {
required:new RegExp(/\S/),
email:new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i),
date: new RegExp(/^((((0?[1-9]|[12]\d|3[01])[\.\-\/](0?[13578]|1[02])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|[12]\d|30)[\.\-\/](0?[13456789]|1[012])[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|((0?[1-9]|1\d|2[0-8])[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?\d{2}))|(29[\.\-\/]0?2[\.\-\/]((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00)))|(((0[1-9]|[12]\d|3[01])(0[13578]|1[02])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|[12]\d|30)(0[13456789]|1[012])((1[6-9]|[2-9]\d)?\d{2}))|((0[1-9]|1\d|2[0-8])02((1[6-9]|[2-9]\d)?\d{2}))|(2902((1[6-9]|[2-9]\d)?(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00)|00))))$/), // format dd/mm/yyyy
int: new RegExp(/[+-]?\d+$/),
float: new RegExp(/^([+-]?(((\d+(\.)?)|(\d*\.\d+))([eE][+-]?\d+)?))$/),
number: { test:function(e) { return !isNaN( e ) } },
alpha: { test:function(e) { return isNaN( e ) } },
equaltoxxx: { test:function(e) { return ( e == $("#xxx").val() ) } } // ejemplo de equal
}
function checkIfValid(value, validationRule){
var validated = false;
if (value != ""){
validated = validationRule.test(value);
}
return validated
}
function validateFiled(field, rule){
var field = field;
var errorLabel = field.parent().find("span.error." + rule)
if ( checkIfValid(field.val(), rules[rule] ) ) {
errorLabel.css('display', "none")
return true
} else {
errorLabel.css('display', "block")
return false
}
}
function validateRules(form){
var validated = true;
$.each( errorMessages, function(i, n) {
form.find("input." + i).each( function(e){
var field = $(this)
if ( !validateFiled( field, i) ) {
validated = false;
//field.focus();
}
})
})
return validated
}
function startValidation(live) {
$("input.required, select.required, textarea.required").each( function(){
$( $(this).parent().children()[0] ).append("<em>*</em>");
})
$.each( errorMessages, function(i, n) {
$("." + i).each( function(){
$('<span class="error '+ i +'">' + n + '</span>').css('display','none').css('color','red').insertAfter($(this));
if (live){
$(this).keyup(function(){
return validateFiled($(this), i);
})
}
});
})
}
function submitOnEnter(form, submiterId){
form.find('input, select').keypress(function(e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
return submitForm(form, submiterId);
} else {
return true
}
});
}
function submitForm(form, submiterId) {
if ( validateRules(form) ) {
if (__doPostBack) { // especific for NET
var id = submiterId.replace("_", "$")
__doPostBack(id, '');
return false
} else {
if (form.submit){
form.submit();
} else {
form.parrents('form').submit();
}
}
return true
} else {
return false
}
}
function submitOnValidation(formElement, live){
startValidation(live);
$(formElement + " input.type[submit], " + formElement + " button.type[submit], "+ formElement +" p.button a").each( function(x){
var submiter = $(this);
var submiterId = submiter.attr('id')
var form = submiter.parents(formElement);
// validate on Enter fieldset for Net
if (__doPostBack) {
submitOnEnter( form, submiterId);
}
submiter.click( function(e){
e.preventDefault();
submitForm(form, submiterId )
})
})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment