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;
});