viernes, noviembre 20, 2009

Form Validation Jquery

Hola

Acá le dejo un modificación que realice a un script de jquery para validar formulario.

Implementacion HTML

<script type="text/javascript" src="jquery/jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery/jquery.formvalidator.js"></script>

Form js
<script type="text/javascript">
$(function () {
$('#btUser').formValidator({
scope : '#user',
errorDiv : '#errorDiv'
});

});
</script>
Form HTML (Sample)

Usuarios

(*) Campos Obligatorios

Input (*)

<input id="input" name="input" class="input" value="" label="Input" required="true" type="text">

Number (*)

<input id="number" name="number" class="input" value="" req="numeric" minlength="2" maxlength="10" label="Number" required="true" type="text">

Double (*)

<input id="double" name="double" req="numeric" class="input" value="" label="Double" required="true" type="text">

Select (*)

<select id="select" name="select" class="input" label="Select" required="true">
<option value="0">...</option>
<option value="1">Nada</option>
</select>

Check

<input id="check" name="check" value="true" type="checkbox">

Radio

<input id="radio" name="radio" value="0" checked="checked" type="radio">Si
<input id="radio" name="radio" value="1" type="radio">No

Password (*)

<input id="password" name="password" req="same" class="input" value="" required="true" rel="password1" label="Password" type="password">

Re-Password (*)

<input id="password1" name="password1" req="same" class="input" value="" required="true" rel="password" label="Re-Password" type="password">

Calle

<input id="calle" name="calle" req="both" class="input" value="" required="true" rel="num" label="Calle" type="text">

Numero

<input id="num" name="num" class="input" value="" required="true" rel="num" label="Numero" type="text">

<input id="btUser" value="Insert" class="sendBtn" type="submit">

Código Javascript

/*
*
* Form Validation 2009
* @author Tolga Arican, Ivan A. Flores Correa
* @website www.utopicfarm.com, slacker-linux.blogspot.com
* @version 2.0.1
*
*/

(function($) {

$.fn.formValidator = function(options) {
$(this).click(function() {
var result = $.formValidator(options);

if (result && jQuery.isFunction(options.onSuccess)) {
options.onSuccess();
return false;
} else {
return result;
}
});
};

$.formValidator = function (options) {

// merge options with defaults
var merged_options = $.extend({}, $.formValidator.defaults, options);

// result boolean
var boolValid = true;

// result error message
var errorMsg = '<ul>';

// clean errors
$(merged_options.scope + ' .error-both, ' + merged_options.scope + ' .error-same, ' + merged_options.scope + ' .error-input').removeClass('error-both').removeClass('error-same').removeClass('error-input');

// Verificamos si se validan
$(merged_options.scope+' .input').each(function(){
thisValid = $.formValidator.validate($(this),merged_options);
boolValid = boolValid && thisValid.error;
if (!thisValid.error) errorMsg += thisValid.message;
});
errorMsg += '';

// submit form if there is and valid
if ((merged_options.scope != '') && boolValid) {
$(merged_options.errorDiv).fadeOut();
}

// if there is errorMsg print it if it is not valid
if (!boolValid && errorMsg != '') {
var tempErr = (merged_options.customErrMsg != '') ? merged_options.customErrMsg : errorMsg;
$(merged_options.errorDiv).hide().html(tempErr).fadeIn();
}

return boolValid;
};

$.formValidator.validate = function(obj,opts) {
var valAttr = obj.val();
var css = opts.errorClass;
var mail_filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
var numeric_filter = /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)|(^-?\d*$)/;
var tmpresult = true;
var result = true;
var errorTxt = '';
var label = obj.attr('label');
var required = obj.attr('required');
var req = obj.attr('req');
var name = obj.attr('name');
var type = obj.attr('type');

// Validamos
if (required == 'true') {
tmpresult = false;
if (valAttr != '') {
if (valAttr != '0') {
tmpresult = true;
}
}
if (!tmpresult) errorTxt +='<li>'+label+' '+opts.errorMsg.reqString+'</li>';
result = result && tmpresult;
}

// SAME FIELD VALIDATION
if (req == 'same') {

tmpresult = true;

group = obj.attr('rel');
tmpresult = true;
$(opts.scope+' .input[rel="'+group+'"]').each(function() {
if($(this).val() != valAttr || valAttr == '') {
tmpresult = false;
}
});
if (!tmpresult) {
$(opts.scope+' .input[rel="'+group+'"]').parent().parent().addClass('error-same');
errorTxt += '<li>'+opts.errorMsg.reqSame+'</li>';
} else {
$(opts.scope+' .input[rel="'+group+'"]').parent().parent().removeClass('error-same');
}

result = result && tmpresult;
}

// BOTH INPUT CHECKING
// if one field entered, the others should too.
if (req == 'both') {

tmpresult = true;

if (valAttr != '') {

group = obj.attr('rel');

$(opts.scope+' .input[rel="'+group+'"]').each(function() {
if($(this).val() == '') {
tmpresult = false;
}
});

if (!tmpresult) {
$(opts.scope+' .input[rel="'+group+'"]').parent().parent().addClass('error-both');
errorTxt += '<li>'+opts.errorMsg.reqBoth+'</li>';
} else {
$(opts.scope+' .input[rel="'+group+'"]').parent().parent().removeClass('error-both');
}
}

result = result && tmpresult;
}

// E-MAIL VALIDATION
if (req == 'email') {
tmpresult = mail_filter.test(valAttr);
if (!tmpresult) errorTxt += '<li>'+opts.errorMsg.reqMailNotValid+'</li>';
result = result && tmpresult;
}


// MINIMUM REQUIRED FIELD VALIDATION
var minlength = obj.attr('minlength');
if (obj.attr('minlength') != null) {
tmpresult = (valAttr.length >= minlength);
if (!tmpresult) errorTxt += '<li>'+label+' '+opts.errorMsg.reqMin.replace('%1', minlength)+'</li>';
result = result && tmpresult;
}
// NUMERIC FIELD VALIDATION
if (req == 'numeric') {
tmpresult = numeric_filter.test(valAttr);
if (!tmpresult) errorTxt += '<li>'+label+' '+opts.errorMsg.reqNum+'</li>';
result = result && tmpresult;
}

if (result) {
obj.removeClass(css);
} else {
obj.addClass(css);
}

return {
error: result,
message: errorTxt
};
};

setMsg = function() {

}

// CUSTOMIZE HERE or overwrite by sending option parameter
$.formValidator.defaults = {
onSuccess : null,
scope : '',
errorClass : 'error-input',
errorDiv : '',
errorMsg : {
reqString : 'es Requerido',
reqDate : 'Fecha no es valida',
reqNum : 'solo acepta Numeros',
reqMailNotValid : ' E-Mail no es valido',
reqMailEmpty : 'Please fill e-mail',
reqSame : 'Campos Re-confirmacion no son iguales',
reqBoth : 'Campos Relacionado(s) requerido',
reqMin : ' requiere %1 como minimo'
},
customErrMsg : ''
};
})(jQuery);

En que le interese le envío el ejemplo funcional

1 comentario:

Kenny dijo...

Gracias por este artículo. Es interesante la comparación entre jQuery y JavaScript "puro".