Problema con formulario usando onSubmit="" y .submit()

[Mokonauta]

Buenas,

Que tal, les explico.

Tengo un formulario que en "onSubmit" le pide a la funcion JS "validar()" que valide los campos y las imagenes contenidas en el formulario pero y tengo la siguiente función que mientras se estan validando los datos muestra una pantalla en gris transparentoso y una imagen de "Cargando...".

Código [Seleccionar] Expandir


$(function(){
var pop = function(){
$('#screenBS').css({"display": "block", opacity: 0.7, "width":$(document).width(),"height":$(document).height()});
$('#boxBS').css({"display": "block"});
$('#linkBS').css({"display": "block"});
}

$('#form01').submit(pop); // ID de formulario
});


La linea donde comienza el formulario es: <form action="" method="POST" id="form01" name="form01" enctype="multipart/form-data" onSubmit="return validar()">

El problema es si en onSubmit la funcion validar() devuelve un error $('#form01').submit(pop); de todas formas se ejecuta y entonces hace el bloqueo de pantalla y no esta cargando nada en el formulario.

Como podría modificar mi código JS para que se ejecute solo si la función validar() devuelve true?
o
Podría sustituir a .submit() de otra manera como para que se muestre en el momento en que lo deseo? Digamos, por ejemplo, onReady() o algo similar?

Dejo también el código de mi función validar() y comento que ya se que solo valida que no esten vacios los campos y no el contenido de ellos, lo que pasa es que el validar los caracteres lo hago con PHP.

Código [Seleccionar] Expandir


function validar(){

// Primera sección de formulario
var Nombre = document.getElementById("nombre").value;
var Email = document.getElementById("email").value;
var Telefono = document.getElementById("telefono").value;
// Si el campo tiene el minimo de caracteres permitido entones continua con la
// verificacion del siguiente bloque de campos
if(!(Nombre.length < 10) && !(Email.length < 10) && !(Telefono.length < 10)){

// Segunda sección de formulario
var Modo = document.getElementById("modo").value;
var NombrePropiedad = document.getElementById("nombrePropiedad").value;
var DireccionCorta = document.getElementById("direccionCorta").value;
var Direccion = document.getElementById("direccion").value;
var Descripcion = document.getElementById("descripcion").value;
var Monto = document.getElementById("monto").value;
var Moneda = document.getElementById("moneda").value;
var TipoPropiedad = document.getElementById("tipo_propiedad").value;
var Recamaras = document.getElementById("recamaras").value;
var Bano = document.getElementById("bano").value;
var Muebles = document.getElementById("muebles").value;
var Niveles = document.getElementById("niveles").value;
var Cupo = document.getElementById("cupo").value;
// Si el campo tiene el minimo de caracteres permitido entones continua con la
// carga de las imagenes
if(Modo.length > 4 && NombrePropiedad.length > 4 && DireccionCorta.length > 5 && Direccion.length > 15 && Descripcion.length > 15 && Monto.length > 2 && Moneda.length > 2 && TipoPropiedad.length > 3 && Recamaras.length > 0 && Bano.length > 0 && Muebles.length > 0 && Niveles.length > 0 && Cupo.length > 0){

// Cuarta sección de formulario
var ImagenP = document.getElementById("imgP").value;

if(ImagenP.length > 0){

// Terminos y condiciones
var Terminos = document.getElementById("terminos").checked;

if(Terminos == 1){

return true;
}else{
alert("Para poder subir la propiedad debes aceptar que tienes autorización para publicar esta información en el sitio.");
return false;
}
}else{
alert('La última sección del formulario \"Imágenes\" debe incluir la fotografía principal de la propiedad, es la imagen que veran principalmente los usuarios, verifique e intente nuevamente.\nTodos los campos son obligatorios.');
return false;
}
}else{
alert('La segunda sección del formulario \"Datos de la Propiedad\" debe ser completada correctamente, verifique e intente nuevamente.\nTodos los campos son obligatorios.');
return false;
}
}else{
alert('La primera sección del formulario \"Datos Personales\" debe ser completada correctamente, verifique e intente nuevamente.\nTodos los campos son obligatorios.');
return false;
}

}


Agradezco mucho de antemano su tiempo.
Buena vibra desde México

[Mokonauta]

Alguien?

[#!drvy]

Usa el .submit de jquery a tu antojo y quita el onsubmit.

Por ejemplo:

Código (javascript) [Seleccionar] Expandir

$("#form01").submit(function(){
   if (validar()===true){pop(); return true;} else {return false;}
});

lo que pasa es que el validar los caracteres lo hago con PHP.

Haz lo también con javascript.. te ahorras algo de recursos del servidor.

Saludos

[Mokonauta]

Muchas gracias amigo, apenas vi este mensaje.
Saludos

[dank_]

Usa el .submit de jquery a tu antojo y quita el onsubmit.

Por ejemplo:

Código (javascript) [Seleccionar] Expandir

$("#form01").submit(function(){
   if (validar()===true){pop(); return true;} else {return false;}
});
Haz lo también con javascript.. te ahorras algo de recursos del servidor.

Saludos

Las validaciones siempre deben realizarse en el backend, pues sólo ahí realmente validas  algo. Una validación en javascript puede ser fácilmente saltada.

[#!drvy]

dank_ si te fijas dije, también. Sabemos que puede ser salteada, pero en la mayoría de los casos es mas probable que un usuario se equivoque antes de que intente saltarse la validación. ¿Qué mejor que tener 2-3 métodos para validar y evitar enviar un request no valido ?

Saludos

[EFEX]

Yo preferiria utilizar html...
http://www.w3.org/wiki/HTML5_form_additions