Wenas!
Estoy desarrollando una serie de validaciones para unos formularios que tengo en mi aplicacion, he encontrado el siguiente js en internet y trato de modificarlo:
Código PHP:
$(document).ready(function(){
// ====================================================== //
var jVal = {
'login' : function() {
$('body').append('<div id="loginInfo" class="info"></div>');
var loginInfo = $('#loginInfo');
var ele = $('#login');
var pos = ele.offset();
loginInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length == 0) {
jVal.errors = true;
loginInfo.removeClass('correct').addClass('error').html('← No puede estar vacio').show();
ele.removeClass('normal').addClass('wrong');
} else {
if(ele.val().length > 5) {
jVal.errors = true;
loginInfo.removeClass('correct').addClass('error').html('← MAx 5 caracteres').show();
ele.removeClass('normal').addClass('wrong');
} else {
loginInfo.removeClass('error').addClass('correct').html('').show();
ele.removeClass('wrong').addClass('normal');
}
}
},
'password' : function() {
$('body').append('<div id="passwordInfo" class="info"></div>');
var passwordInfo = $('#passwordInfo');
var ele = $('#password');
var pos = ele.offset();
passwordInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length == 0) {
jVal.errors = true;
passwordInfo.removeClass('correct').addClass('error').html('← No puede estar vacio').show();
ele.removeClass('normal').addClass('wrong');
} else {
if(ele.val().length > 5) {
jVal.errors = true;
passwordInfo.removeClass('correct').addClass('error').html('← MAx 5 caracteres').show();
ele.removeClass('normal').addClass('wrong');
} else {
passwordInfo.removeClass('error').addClass('correct').html('').show();
ele.removeClass('wrong').addClass('normal');
}
}
},
'nombre' : function() {
$('body').append('<div id="nombreInfo" class="info"></div>');
var nombreInfo = $('#nombreInfo');
var ele = $('#nombre');
var pos = ele.offset();
nombreInfo.css({
top: pos.top-3,
left: pos.left+ele.width()+15
});
if(ele.val().length == 0) {
jVal.errors = true;
nombreInfo.removeClass('correct').addClass('error').html('← No puede estar vacio').show();
ele.removeClass('normal').addClass('wrong');
} else {
if(ele.val().length > 5) {
jVal.errors = true;
nombreInfo.removeClass('correct').addClass('error').html('← MAx 5 caracteres').show();
ele.removeClass('normal').addClass('wrong');
} else {
nombreInfo.removeClass('error').addClass('correct').html('').show();
ele.removeClass('wrong').addClass('normal');
}
}
},
'sendIt' : function (){
if(!jVal.errors) {
$('#jform').submit();
}
}
};
// ====================================================== //
$('#send').click(function (){
var obj = $.browser.webkit ? $('body') : $('html');
obj.animate({ scrollTop: $('#jform').offset().top }, 750, function (){
jVal.errors = false;
jVal.login();
jVal.password();
jVal.nombre();
});
return false;
});
$('#login').change(jVal.login);
$('#password').change(jVal.password);
$('#nombre').change(jVal.nombre);
// ====================================================== //
});
Mi idea es que valide el dato en tiempo real y que haga otra validacion al pulsar el boton submit de enviar. La validacion de datos en tiempo real la hace perfectamente, el problema viene al pulsar el boton submit.
En el caso de que tenga un primer formulario en el que solo aparezcan los campos login y password a validar ( nombre no, aparece en otro formulario) al pulsar el boton submit no me deja continuar xq ese campo "nombre" al no aparecer en ese formulario da un error ( el error viene de ahi, xq si comento todo lo relativo a "nombre" funciona bien)
Una posible solucion seria crear un archivo javascript diferente para cada formulario, contiendo solo las variables que aparecen en ese formulario, pero prefiero evitar esto y asi no tener 10 u 11 archivos .js para las validaciones.
Que pensais?