Formulario HTML+CSS+JS+PHP+AJAX no se une

[Hialek]

Buenas. Soy antiguo en este foro, pero esta es mi primera vez posteando, pues tambien es la primera vez que solo leer no me es de ayuda aquí.

El problema es el siguiente... tengo un formulario animado y validado con Javascript (Funciona perfecto en todo navegador). Además, hice un envio de los datos utilizando un archivo PHP que puedo invocar mediante el atributo "action" del formulario (cosa que prefiero evitar). Y como al llamar al archivo php me lleva hasta la página donde carga el fichero php, utilice un pequeño codigo en ajax que capta el envio y evita que la página cambie. Al evitarlo, hago uso de otra pequeña funcion en javascript que modifica dos "divs" de modo que uno desaparezca y el otro aparezca (se desvanece el formulario y aparece un mensaje para el usuario).
Pese a que pudiera sonar complicado, la verdad es que el formulario es relativamente simple y dependiendo del navegador ocurre alguna anomalia diferente.
En internet explorer, que suele ser el más problematico, funciona bien todo el proceso desde la validacion hasta la recepcion del mail. Sin embargo en mozilla y chrome, solo termina al presionar el boton de envio dos veces y jamás llega a enviar los datos.

Adjunto parte del codigo utilizado para ver si alguien tiene alguna idea de lo que puede ocurrir o me ofrece alguna solución, se lo agradecería mucho, porque ya llevo un par de días tratado de resolver la unión.
Además, considero que la animacion del formulario no hace falta incluirla pues sé que opera correctamente y no hace llamados externos. Asi como la funcion de envio en php que tambien opera bien y tampoco hace llamados a funciones externas.

Gracias a cualquiera que pueda ayudarme

FORMULARIO EN HTML

Código HTML:

<form method="post" id="formu" class="centrar" onSubmit="return eliminar(this);">
 
                        <fieldset id="formulario">
                            </br>
                            <h1 class="title" size="200" >CONTACTO</h1>
                            </br>
                            <p><label class="label" for="your-name" name="contact_name" id="contact_name_label">Nombre<em> (Obligatorio)</em></label>
                                <span><input class="nombre" type="text" name="contact_name" value="" size="40" /></span></p>
                            <p><label class="label" for="your-empresa" name="contact_empresa" id="contact_empresa_label">Empresa</label>
                                <span><input class="bussines" type="text" name="contact_empresa" value="" size="40" /></span></p>
                            <p><label class="label" for="your-email" name="contact_email" id="contact_email_label">E-Mail<em> (Obligatorio)</em></label>
                                <span><input class="email" type="text" name="contact_email" value="" size="40" /></span></p>
                            <p><label class="label"  for="your-phone" name="contact_phone" id="contact_phone_label">Telefono</label>
                                <span><input class="phone"  type="text" name="contact_phone" value="" size="40" /></span></p>
                            <p><label class="label" for="your-country" name="contact_country" id="contact_country_label">Pais</label>
                                <span><input class="country" type="text" name="contact_country" value="" size="40" /></span></p>                    
                            <p><label class="label" for="your-city" name="contact_city" id="contact_city_label">Ciudad</label>
                                <span><input class="city" type="text" name="contact_city" value="" size="40" /></span></p>
                            <p><span><textarea name="contact_message" cols="40" rows="5" maxlength="1000" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;">Mensaje (Obligatorio)</textarea></span></p>
 
                            <p><input type="submit" name="enviar" value="Enviar" /><img class="ajax-loader" style="visibility: hidden;" alt="Enviando ..." src="/img/cargando.gif"/></p>
 
 
                        </fieldset>
                    </form>
 

VALIDACION BASE EN JS:

Código Javascript:

function validar(f) {
if (f.contact_name.value=="") {
    alert("Por favor ingrese su nombre");
    f.contact_name.focus();
    return false;
    }
//if (/^[0-9a-z_\-\.]+@[0-9a-z\-\.]+\.[a-z]{2,4}$/i.test(f.contact_email.value))
var exr = /^[0-9a-z_\-\.]+@[0-9a-z\-\.]+\.[a-z]{2,4}$/i;
if(exr.test(f.contact_email.value))
    {
    //alert("CORRECTO");
    }
else
    {
    alert("La dirección de email es incorrecta");
    return false;
    }
if (f.contact_message.value=="" || f.contact_message.value=="Mensaje (Obligatorio)" ) {
    alert("Por favor escriba un mensaje");
    f.contact_message.focus();
    return false;
    }
 
 
return true;
 
}
 

FUNCION QUE HACE LOS LLAMADOS VALIDAR Y EL TRABAJO SOBRE CSS Y EVITA RECARGA (AJAX)

Código AJAX:

function eliminar(a)
            {
                if(validar(a))
                {
                    
                    $(document).ready(function() 
                    {
 
                    // Interceptamos el evento submit
                    $('#formu').submit(function() { 
                        
                    // Enviamos el formulario usando AJAX
                     $.ajax({
                            type: 'POST',
                            url: $(this).attr('enviar.php'),
                            data: $(this).serialize(),
            
                    // Mostramos un mensaje con la respuesta de PHP
                    success: function(data) {
                            //$('#texto').html(data);
                            $('#contact').fadeOut('slow');
                            $('#texto').fadeIn('slow');
                                            }
                            })        
                    return false;
                                                    });
                    })
                    
                    return false;
                    
                }
                else
                {
                    return false;
                }
            }
 

Nuevamente gracias a cualquiera que pueda echarme una mano.

[Albuss]

Sabes rezar? te vedria bien en estos casos :P

[Hialek]

Hace buen tiempo que resolví esto y como nadie me entregó solución, vengo a entregar la parte que peor estaba para que quien lo necesite pueda usarla.

Aunque no era el único, el principal problema era el terrible uso de AJAX en la función eliminar(). No solo me sobraban partes de la función debido a que no la comprendía del todo, sino que sobraban llaves y return.

Si alguien tiene dudas de como se resolvieron otras partes, puede escribirme directamente o postear aquí. Pero pienso que es más autoexplicativo el código mismo. Compare, ríase y utilicelo ;)

Código AJAX:

function eliminar(a)
{
 
     if(validar(a))
     {
         
        $.ajax({
        type: "POST",
        url: "envio.php",
        success: function() {
                    
            $('#contact').fadeOut('slow');
            $('#texto').fadeIn('slow');
                            }
               });
        //Para evitar que recargue la página retornamos false
        return false;
 
      }
                
      else
      {
        return false;
      }
            
}
 

[Dafonz]

que bueno que lo arreglaste, la verdad no había visto el post pero como observación para que te la complicas regresando falsos para que no recargue si igual lo mandas con Ajax, porque no simplemente en el botón no usas type="button" en vez submit y ya todo lo haces con ajax, al igual forma que en la funcion de $.ajax manejes algo como

error: function() {alert("Error. No se envió el mensaje")}

Y a poco ese si funciona si no le mandas ningún parámetro, a menos que envió no necesite nada del formulario validado que no le veo mucho sentido