0

Tengo el siguiente problema, necesito enviar el típico formulario de contacto por mail sin recargar la pagina, estoy usando ajax y phpmailer...me guie de muchos tutoriales ya que no conozco mucho del tema y finalmente pude enviar el mail sin recargar la pagina el tema ahora es que me manda el mail con cualquier cosa que le ponga, hasta sin poner nada xd no sabría cómo validarlo, probe con validate js pero me termina recargando la pagina y no valida(entiendo que yo soy el que esta haciendo la cosas mal), agradecería una ayuda, ya sea en php o js, agote mis recursos y le vengo dando vueltas al asunto hace tres dias xo...

<form id="contact">
                        <div class="contenedor-inputs">
                            
                            <input type="text" placeholder="Nombre"  name="name" id="name" required/>
                            
                            <input type="email" placeholder="Correo" name="email" id="email" required/>
                                                        
                            <textarea placeholder="Mensaje" name="message" id="message" required></textarea>
                        </div>
                        
                        <div id="msg"></div>
                        
                        <button class="btn-submit" id="submit-btn">Enviar</button>
                    </form>

Código JavaScript:

$(document).ready(function(){
$('#submit-btn').click(function(event){
  event.preventDefault();
   $.ajax({
      dataType: 'JSON',
      url: 'enviar.php',
      type: 'POST',
      data: $('#contact').serialize(),
      beforeSend: function(xhr){
        $('#submit-btn').html('Enviando...');
      },
      success: function(response){
        if(response){
          console.log(response);
          if(response['isSuccess']){
           $('#msg').html('<div class="alert success">'+ response['msg']  +'</div>');
            $('input, textarea').val(function() {
               return this.defaultValue;
            });
          }
          else{
            $('#msg').html('<div class="alert error">'+ response['msg'] +'</div>');
          }
        }
      },
      error: function(){
        $('#msg').html('<div class="alert error">Ocurrio un error, intente de nuevo mas tarde</div>');
      },
      complete: function(){
        $('#submit-btn').html('Enviar');
      }
    });
});

Y el código php...(como dije más arriba, el código lo saqué de tutoriales, por eso adjunto el php con unas líneas de código comentadas al principio que son las únicas modificaciones que hice para que no me de error y me envie el mail, ya que el formulario original tenía unos select y el mío no)

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'phpmailer/Exception.php';
require 'phpmailer/PHPMailer.php';
require 'phpmailer/SMTP.php';
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$message = trim($_POST['message']);
if($name && $email && $message){
    //if(!filter_var($email, FILTER_VALIDATE_EMAIL))
    //{
  //$isSuccess = false;
  //$msg = 'Invalid email. Please check';
//}

   //   else{
          // Format the checkbox values
   //       $interest_message = '';
   //       for ($i = 0; $i < count($interest); $i++) {
   //         if ($i === count($interest) - 1) {
   //           $interest_message .= $interest[$i];
   //         } else {
   //           $interest_message .= $interest[$i] . ', ';
   //         }
   //       }
     
  

      $mail = new PHPMailer;
      $mail->isSMTP();                                      // Set mailer to use SMTP
      $mail->Host = 'smtp.gmail.com';  // Specify main and backup SMTP servers
      $mail->SMTPAuth = true;                               // Enable SMTP authentication
      $mail->Username = '';                 // SMTP username
      $mail->Password = '********';                           // SMTP password
      $mail->SMTPSecure = 'tls';                            // Enable TLS encryption, `ssl` also accepted
      $mail->Port = 587;                                    // TCP port to connect to

      $mail->setFrom('', 'WebMaster');
      $mail->addAddress('', 'Business Owner');     // Add a recipient
      $mail->addReplyTo($email, $name);
      $mail->addBcc($email);
      $mail->isHTML(true);                                  // Set email format to HTML

      $mail->Subject = 'Consulta enviada desde BDN';
      $mail->Body    = 'Nombre: ' . $name . ' <br />Mensaje: ' . $message;

      if(!$mail->send()) {
          echo 'El mensaje no pudo ser enviado';
          echo 'Mailer Error: ' . $mail->ErrorInfo;
      } else {
          $isSuccess = true;
          $msg = 'Mensaje enviado, gracias por contactarnos!';
      }
  }


$data = array(
    'isSuccess' => $isSuccess,
    'msg' => $msg
);

echo json_encode($data);

Mil gracias por tomarse el tiempo a quien se lo tome, y espero se entienda, saludos.

6
  • Conviene validar en ambos lados: cliente y servidor. Del lado del servidor, puedes validar mediante un ternario, por ejemplo: $name = !empty($_POST['name']) ? trim($_POST['name']) : NULL; $message = !empty($_POST['message']) ? trim($_POST['message']) : NULL; Para el email usa los filtros de validación propios: $email=filter_var($_POST['email'], FILTER_VALIDATE_EMAIL); Y luego todo como está en tu código. Para la validación del lado del cliente, hay varios métodos, debes decidirte por uno en concreto.
    – A. Cedano
    Commented el 4 may. 2021 a las 13:43
  • Gracias por tu respuesta, me funciona a la hora de checar el mail Commented el 4 may. 2021 a las 14:36
  • como podria agregar al condicional que el nombre y el mensaje no esten vacios, a modo de alerta, el mail se muestra cuando es invalido pero si hay mail, lo envia asi no haya nombre o mnsj gracias por tu tiempo y disculpa mi ignorancia $name = !empty($_POST['name']) ? trim($_POST['name']) : NULL; $message = !empty($_POST['message']) ? trim($_POST['message']) : NULL;$email=filter_var($_POST['email'], FILTER_VALIDATE_EMAIL); if(!filter_var($email, FILTER_VALIDATE_EMAIL)){$isSuccess = false;$msg = 'Correo invalido!';} Commented el 4 may. 2021 a las 14:46
  • Los ternarios que indiqué en mi comentario asignan NULL cuando el nombre y el mensaje estén vacíos y luego el if controla las tres variables. Si no funciona agrégale trim a la parte del empty en los ternarios.
    – A. Cedano
    Commented el 4 may. 2021 a las 16:53
  • gracias! me sirvio, no es exactamente lo que esperaba (pretendia que cada campo tuviera su propio mensaje) pero ahora tengo que poner un mail valido y llenar todos los campos, que era lo que necesitaba, voy a seguir estudiando el tema...tambien me gustaria ponerle un captcha jaja muchas gracias por tu tiempo! Commented el 4 may. 2021 a las 18:00

1 respuesta 1

0

La validación es un tema muy amplio. En primer lugar, se recomienda validar de ambos lados: cliente (Javascript) y servidor (PHP). Luego, hay muchos métodos de validación, tanto en el servidor, como en el cliente.

En el servidor por lo general se suele verificar que los datos no están vacíos y para campos como el email usar filtros específicos de PHP.

Esto sería suficiente como validación del lado del servidor:

$name = !empty(trim($_POST['name'])) ? trim($_POST['name']) : NULL; 
$message = !empty(trim($_POST['message'])) ? trim($_POST['message']) : NULL; 

Para el email usa los filtros de validación propios de PHP:

$email=filter_var($_POST['email'], FILTER_VALIDATE_EMAIL);

if($name && $email && $message){
    //Resto del código

Validación avanzada

Puedes implementar también una validación más avanzada basada en filter_input_array() que incluya varios tipos de filtros según los datos y el tipo de uso.

En este ejemplo: saneamos nombre y mensaje y validamos el email.

#Aquí configuramos el filtro para cada entrada del POST
$args=array(
    'name' => FILTER_SANITIZE_STRING,
    'email' => FILTER_VALIDATE_EMAIL,
    'message' => FILTER_SANITIZE_STRING
);

$mData = filter_input_array(INPUT_POST, $args);
/*
    $mData será un array con cada clave asociada:
    a) Al dato recibido si pasa la validación
    b) Al valor booleano false si la validación falla
    Por ejemplo, si el filtro para email falla, 
    en $mData la clave email quedaría así:
    'email'=>false
    Para verificar que todo se validó correctamente podemos hacer esto:
*/
if (!$mData || in_array(false, $mData)) {
    /*
        Algo falló en la validación, mostrar un mensaje de error
        o lo que quieras hacer
    */
}else {
    /*
        Todo está correcto, prepara aquí el envío del mensaje
        OJO: usar $mData['clave'] para obtener los datos saneados y filtrados
        Es decir: $mData['name'], $mData['email'], $mData['message']
    */
}

En el cliente puedes controlar que los inputs no estén vacíos, usar validadores, etc. y si quieres incluir captcha y demás entonces entramos ya en otro universo. Dado que hay tantas posibilidades te recomiendo que primero te decidas por una y si tienes problemas abras una nueva pregunta al respecto.

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.