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">Form HTML (Sample)
$(function () {
$('#btUser').formValidator({
scope : '#user',
errorDiv : '#errorDiv'
});
});
</script>
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
