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!.
