Mostrando las entradas con la etiqueta jquery sample code html javascript. Mostrar todas las entradas
Mostrando las entradas con la etiqueta jquery sample code html javascript. Mostrar todas las entradas

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