entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Formulario de contacto | HTML | PHP | AJAX | JQUERY (Código refresca la pagina).

Hola buen dia, soy nuevo en el foro y vengo aca con la intencion de que puedan darme una mano con este codigo que estoy creando.

Básicamente es un formulario creado con HTML, PHP, JQUERY Y AJAX. En tal caso tengo una función completa divida en varias partes:

Funcion que me permite validar los campos antes de enviar por ajax:

function validarform()
{

        $('.alert').remove();

    var nombre=$('#nombre').val(''),
   email=$('#email').val(''),
   asunto=$('#asunto').val(''),
   mensaje=$('#mensaje').val('')

   if(nombre=="" !! nombre==null)
    {
        color("nombre");
        Alerta("Campo obligatorio");
        return false;

    }
    else
    {
        var error =  /^[a-zA-ZñÑáéíóúÁÉÍÓÚ]*$/;
        if (!error.test(nombre)) {

            color("nombre");
        Alerta("No se permiten caracteres especiales");
        return false;
        }
    }
    if(email=="" !! email==null)
    {
        color("correo");
        Alerta("Campo obligatorio");
        return false;

    }
    else
    {
        var error =  /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/;
        if (!error.test(email)) {

            color("correo");
        Alerta("No se permiten caracteres especiales");
        return false;
        }
    }

    if(asunto=="" !! asunto==null)
    {
        color("asunto");
        Alerta("Campo obligatorio");
        return false;

    }
    else
    {
        var error =  /^[,\\.\\a-zA-Z0-9ñÑáéíóúÁÉÍÓÚ ]*$/;
        if (!error.test(asunto)) {

            color("asunto");
        Alerta("No se permiten caracteres especiales");
        return false;
        }
    }

    if(mensaje=="" !! mensaje==null)
    {

        color("mensaje");
        Alerta("Campo obligatorio");
        return false;

    }
    else
    {
        var error =  /^[,\\.\\a-zA-Z0-9ñÑáéíóúÁÉÍÓÚ ]*$/;
        if (!error.test(mensaje)) {

            color("mensaje");
        Alerta("No se permiten caracteres especiales");
        return false;
        }
    }

            return true;

}
        $('input').focus(function(){

            $('.alert').remove;
            colordefecto('nombre');
            colordefecto('email');
            colordefecto('asunto');
        });

$('textarea').focus(function(){

            $('.alert').remove;
            colordefecto('mensaje');
        });
function color(color)

{
    $('input' + color).css({

        border: "1px solid #pd5144"
    });

}

function colordefecto(color)

{
    $('input' + color).css({

        border: "1px solid #999"
    });
}
//alerta

function Alerta(alert){

$('#nombre').before ('<div class="alert"> Alerta: '+ alert +'</div>');

}

Funcion de ajax: Por medio de esta funcion hare que cuando exista algun error en los campos (vacios, caracters raros y demas) se ha llamada la función anterior que especifique arriba. A Lo que me refiero es que cuando exista algun error, la validación se deberia hacer antes de que se ejecute el Ajax y haga envío del correo.


$(document).ready(function()
{
$(".contacto").bind("submit", function(){

   var validacion = validarform();

     if (validacion==true)
     {
         $.ajax({

error: function(error){

     $('.contacto')[0].reset(); 
$('#Exito').css("display","inherit").delay(3000).fadeOut("fast");

}
         });
      }

      else
      {
         $.ajax({

         type: $(this).attr("method"),
         url: $(this).attr("action"),
         data: $(this).serialize(),
         cache: false, 
         contentType: false,
         processData: false,
         dataType: "json",
          success: function(res){
            if(res==1)
            {

              $('.contacto')[0].reset(); 

              $('#Exito').css("display","inherit").delay(3000).fadeOut("fast");
            }
        },
});
      }

   return false;
        });

         });

Mi problema es que al momento de darle al botón submit del formulario este refresca la pagina y no hace caso a la función antes mencionada. Lo que busco es que note los errores sin refrescar y envíe luego de que estes sean correctos, sin refrescar también debido a que es un one-page que estoy realizando. :(

Soy nuevo en cuanto a validaciones y manejo de ajax, entonces me gustaria saber como podria hacer la validación correctamente dentro de ajax.

Dejo mi codigo php para que miren un poco:

<?php

function campos_validado($campo){

    $campo=trim($campo);
    $campo=stripcslashes($campo);
    $campo=htmlspecialchars($campo);

    return $campo;
}

if (isset($_POST["nombre"]) && !empty($_POST["nombre"]) &&
isset($_POST["correo-e"]) && !empty($_POST["correo-e"]) &&
isset($_POST["asunto"]) && !empty($_POST["asunto"]) &&
isset($_POST["mensaje"]) && !empty($_POST["mensaje"]))
{

$Myemail = "[email protected]";
$nombre = campos_validado($_POST["nombre"]);
$correo_e = campos_validado($_POST["correo-e"]);
$asunto = campos_validado($_POST["asunto"]);
$mensaje = campos_validado($_POST["mensaje"]);

$peticion =  "nombre:" .$nombre."\n asunto:" .$asunto;
$peticion .=  "\nCorreo:" .$correo_e;
$peticion .=  "mensaje:" .$mensaje;
@mail($Myemail, "Mensaje de mi portafolio". $nombre, $peticion);
return print(json_encode(' Mensaje enviado - El administrador se pondra en contacto contigo muy pronto'));

}

else
{
    print(json_encode('Mensaje no enviado'));
}

                ?>

Gracias!.

1 Respuesta

2votos

cobasESP Puntos19650

Hola, no pones el código html, pero estoy segurísimo de que tienes el botón de submit dentro del form, si es así, el form automaticamente hace submit al action que tengas en el form, de no haber action, por defecto coge la propia pagina en la que estás.

Para que no te recarge la página, debes sacar el boton de acción fuera del <form>, y asi funcionará el form con ajax, de la otra forma funcionara nativamente haciando submit, a mi me ha pasado varias veces.

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta