0

Estoy realizando un formulario de contacto para un one-page, el caso es que queria saber como puedo llamar a una funcion Jquery desde ajax. Tengo el siguiente codigo

-- PHP --

 <?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'));

    }

                    ?>

}

Funcion Jquery:

Funcion como que tal que valida los campos, evita caracteres raros y demás en los inputs.

function validarform()
{

         /*remove, remueve una clase que esta dentro de esta, esto con la intencion de no repetir los campos de error cuando presione enviar*/
        $('.alert').remove();

         /*Variables para cuando los inputs esten vacios*/

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

/*Validaciones*/

/*Si en tal caso Var esta sin nada o es null llamo a una estilo para cuando el campo sea invalido y doy una alerta diciendo que falta el campo*/
   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;
        }
    }


}
/*Focus para errores.*/
        $('input').focus(function(){

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


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

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


function color(color)
/*Funcion que da un border rojo para campos erroneos */
{
    $('input' + color).css({

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

}


function colordefecto(color)
  /*Funcion para cambiar el color de campos faltantes*/

{


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

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

}


//alerta

function Alerta(alert){

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

}

Ajax: Con el siguiente código hago que la ventana no se recargue al momento de enviar el formulario y limpiar campos despues del envio.

$(document).ready(function()
{


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



        $.ajax({

            type: $(this).attr("method"),
            url: $(this).attr("action"),
            data: $(this).serialize(),

            success: function(res){

                if(res==1)
                {

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


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


                }

            },
            error: function(error)
            {

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

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

            }

        });

return false;

    });
        });

Mi pregunta es: Si en tal caso se puede realizar esta acción, La llamada debería hacerse externamente?

A lo que me refiere es que si debo especificar las funcion jquery dentro del documento donde esta almacenado el código ajax o fuera de este, o simplemente debo colocar la funcion de ajax en un archivo aparte y luego llamarlo con el success: o error: de ajax.

Lo que busco es que al darle click al botón ("enviar") y si el usuario en algún punto pone caracteres o campos vacíos, esta función se dispare y empiece a mostrar las acciones que especifique.

Si algun programador experto que me puede aconsejar, cual seria la mejor solución para lograrlo?

Nota: Para el formulario estoy usando inputs en HTML (enviar es un input de tipo: submit). lei que es mejor usa bootstrap pero la verdad me gustaria saber si se puede lograr también con HTML.

Función completa:

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; /*Return de funcion*/

}


        $('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 ajax*/

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



        var validacion = validarform();


     if (validacion==true)
     {


         $.ajax({

error: function(){

     $('.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;



         });
5
  • ¿Puedes darle un formato más 'legible' al código y explicarte un poco más en la explicación? Para poder ayudarte Commented el 31 ene. 2020 a las 4:04
  • Para darte un resumen de todo. Tengo una funcion Jquery que quiero aplicar en codigo ajax (el formulario esta hecho en php, html y este) al momento de darle al botón "enviar" me salte lo que esta en funcion. Commented el 31 ene. 2020 a las 4:47
  • La función Jquery es la que quiero aplicar en el código ajax ya que no es formulario que busco que recargue la pagina al momento de darle enviar, si no que empiece a saltar sus funciones en tal caso el usuario.no coloque o no rellene algun campo. Esto lo hago con la funcion Jquery descrita arriba. Commented el 31 ene. 2020 a las 4:53
  • Pero como explique, estoy practicando apenas con este tecnologías JS, PHP y jquery para hacerlas funcionar. Ya logre que al menos no se recargara la pagina con el ajax pero ahora me estanque en lo de la función. No se como aplicarla. Commented el 31 ene. 2020 a las 4:54
  • Gracias por contestar Commented el 31 ene. 2020 a las 4:54

1 respuesta 1

0

Una de las formas de obtener lo que quieres es agregando a tu función validarform() una ultima linea ( antes de cerrar la función "}"), la cual seria return true, para de esta forma llamar a esta función antes de tu ajax, otorgando su valor a una variable y usar esta como comprobación de validación de envió.

Es decir:

Función js:

function validarform(){ ....texto de la función....  return true;}

Evento submit:

$(".contacto").bind("submit", function(){ 
     var validar = validarform();

     if(validar){

          $.ajax({
                .... texto .....
          });
     }
}
1
  • Hola amigo como estas? Gracias por contestar. Estuve poniendo en practica lo que me dices, edite la pregunta para que puedes revisar un poco el código. La verdad creo que hice algo mal por que ahora la pagina recarga. :s Commented el 1 feb. 2020 a las 5:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.