Tengo un código que valida la entrada dentro del formulario y muestra un mensaje de error en div class="error" si se cumple la condición. Sin embargo, al usar AJAX para evitar que se vuelva a cargar la página, la validación de PHP ya no muestra el mensaje pero sigue funcionando en segundo plano. ¿Alguien por qué está pasando esto? ¿Cómo puedo hacer que la validación de PHP vuelva a funcionar? Gracias por ayudar.
Como puede ver, se supone que el error de validación se muestra en $email_error
<form class="form_pro" action="index.php" method="post" role="form"> <input type="text" class="form" name="E-mail" placeholder="E-mail" value="<?= $email ?>"> <div class="error"><?= $email_error ?></div> <button name="submit" type="submit" class="action_button"></button> </form>El mensaje de error aquí se muestra dentro del "div" antes de agregar el código AJAX
if ($_SERVER["REQUEST_METHOD"] == "POST") { if (empty($_POST["E-mail"])) { $email_error = "E-mail is required"; } else { $email = test_input($_POST["E-mail"]); if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $email_error = "Invalid email format"; } } }Después de agregar esto para evitar que la página se vuelva a cargar al enviar, el mensaje de error de PHP ya no se muestra
$( document ).ready(function() { $(".form_pro").submit(function(e) { e.preventDefault(); $.ajax({ type: "POST", url: "php/interuni_process.php", data: $(this).serialize(), success: function(data) { }, error: function() { } }); }); });Error simple de PHP:
<div class="error"><?= $email_error ?></div> Cuando simplemente envía el formulario y, de acuerdo con su condición, la validación falla, entonces se establece $email_error y cuando se carga la página, el servidor interpreta el error y lo imprime.
Cuando envía a través de AJAX
Comprueba la validación del error y, si falla, se establece $email_error, pero como la página no se recarga, no se interpreta. Entonces, cuando necesite enviar a través de ajax en lugar de configurar el error, repítalo y funcionará bien
Debe modificar su PHP para devolver una respuesta con una respuesta exitosa o los detalles del error y luego, dentro de su función de "éxito" de Javascript, debe analizar la respuesta y, si es una respuesta de error, debe actualizar su DOM en consecuencia.
1) debe hacer eco del mensaje de error en el lado del servidor y obtener la respuesta del servidor y agregarla a ese div
HTML: htm_pagina.php
<form class="form_pro" action="index.php" method="post" role="form"> <input type="text" class="form" name="E-mail" placeholder="E-mail" value="<?= $email ?>"> <div class="error"></div> <button name="submit" type="submit" class="action_button"></button> </form>PHP :destino.php
if ($_SERVER["REQUEST_METHOD"] == "POST") { $email_error=''; if (empty($_POST["E-mail"])) { $email_error = "E-mail is required"; } else { $email = test_input($_POST["E-mail"]); if (!filter_var($email, FILTER_VALIDATE_EMAIL)) { $email_error = "Invalid email format"; } } echo $email_error; }AJAX: html_page.php
$( document ).ready(function() { $(".form_pro").submit(function(e) { e.preventDefault(); $.ajax({ type: "POST", url: "destination.php", data: $(this).serialize(), success: function(data) { if(data.trim() !='') { $('.error').html('<h1>'+data+'</h1>'); } }, error: function() { } }); }); });