1

Estoy validando un formulario html con php y ajax. Al haber algún error, como espacios en blanco, ajax imprime el valor de las variables que muestran esos mensajes de error.

El problema es que actualmente se imprimen todas las variables en un solo string, y a mi me gustaría que cada mensaje de error aparezca debajo del campo respectivo. Por ejemplo, 'Nombre es requerido' debajo del campo nombre, 'Número es requerido' debajo del campo numero... etc, para esto he preparado spans vacíos en my html.

Lo que yo supongo es que primero necesito colocar todas las variables en un array y llamar a ese array usando ajax, pero esto último es lo que no se hacer.

PD: Me gustaría resolver esto con javascript puro, sin jquery.

JS

submitBtn.addEventListener('click', function(){
  var phpRequest = new XMLHttpRequest();
  phpRequest.open('POST', 'form.php');
  phpRequest.onload = function(){        
    phpMessage.insertAdjacentHTML('beforeend', phpRequest.responseText);
  }
  phpRequest.send();
});

PHP

$nameErr = $numberErr = '';
$fieldsErr = array($numberErr, $numberErr);

if($_SERVER['REQUEST_METHOD'] == 'POST'){
  if(empty($_POST['name'])){
    echo $nameErr = 'Name is required';
  }else{
    $name = test_input($_POST['name']);
  }
  if(empty($_POST['number'])){
    echo $numberErr = 'Number is required';
  }else{
    $number = test_input($_POST['number']);
  }      
}

HTML

  <form method="post">
  <label>
    <input type="text" name="name" placeholder="Your name*">
    <span class="status-field-message"></span>
  </label>
  <label>
    <input type="text" name="number" placeholder="Your phone number*">
    <span class="status-field-message"></span>
  </label>      
</form>

EDIT---------------------

Gracias por tu respuesta @Kenny, me parece que funciona pero se esta imprimiendo 'undefined' en vez de las cadenas que contienen las variables, ¿podrías decirme que estoy haciendo mal al implementar tu respuesta en mi código?

JS

submitBtn.addEventListener('click', function(){
  myForm.onsubmit = function(event){
    event.preventDefault();
  }
  var phpRequest = new XMLHttpRequest();
  phpRequest.open('POST', 'form.php');
  phpRequest.onload = function(){
    var errorMessages = JSON.parse(phpRequest.responseText);
    var errorName = phpRequest.nameErr;
    var errorNumber = phpRequest.numberErr;
    statusMessage[0].innerHTML = errorName;
    statusMessage[1].innerHTML = errorNumber;  
    //statusMessage es el array que contiene todos los spans de mi html
  }
  phpRequest.send();
});

PHP

$nameErr = $numberErr = '';
$errors = [];

if($_SERVER['REQUEST_METHOD'] == 'POST'){
  if(empty($_POST['name'])){
    $errors['nameErr'] = 'Name is required';
  }
  if(empty($_POST['number'])){
    $errors['numberErr'] = 'Number is required';
  }
}

echo json_encode($errors);
10
  • Hola, solo una pregunta, en este caso tus validaciones son sumamente sencillas, validar que un campo esté vacío o no, ¿Por qué usar PHP si con puro JS te ahorras la petición al servidor y tus validaciones corren en el cliente de forma más sencilla?
    – Yikarus
    Commented el 24 jul. 2017 a las 17:53
  • Hola @Lixus lo que sucede es que estoy aprendiendo a validar formularios con php por mi cuenta y pienso que habrá ocasiones en las que el usuario tenga JS desactivado, para esos casos quiero que php se encargue del trabajo. Con respecto a lo de validar si esta vacío o no es solo un resumen de mi código para fines de mostrar lo esencial acá, porque también estoy validando otras cosas.
    – GhostOrder
    Commented el 24 jul. 2017 a las 17:57
  • Respondo a tu edición: te falto poner echo json_encode($errors); despues de tu if en PHP. Te esta dando undefined porque no existe ese nombre en el objeto de JS. Commented el 24 jul. 2017 a las 18:24
  • @Kenny Disculpa, acabo de editar eso, esa parte la olvide colocar aquí en SO, pero si la tenia en mi código.
    – GhostOrder
    Commented el 24 jul. 2017 a las 18:26
  • Esta bien, no hay problema. Ya vi lo que esta pasando. Estas obteniendo los valores del objeto equivocado. En vez de var errorName = phpRequest.nameErr; debes poner var errorName = errorMessages.nameErr; porque fue en errorMessages donde guardast el JSON ya convertido. Y lo mismo para la parte del number. Commented el 24 jul. 2017 a las 18:28

1 respuesta 1

1

Tu idea de usar arrays es muy buena, y de hecho alguien ya tuvo esa idea antes y de allí surgió la idea de JSON. Es muy fácil de usar y esto equivale a usar arrays en las comunicaciones.

Haremos uso de las funciones ya implementadas en PHP y JavaScript para lograr este objetivo, aunque se podría hacer todo manualmente.

De lado de PHP, te sugiero que uses arreglos porque 1) ya tienes la intención de usar arreglos y 2) ya existen funciones implementadas para el manejo de arreglos a JSON, asi que podemos pensar en algo así:

PHP

$arreglo_respuestas = [];
if($_SERVER['REQUEST_METHOD'] == 'POST'){
  if(empty($_POST['name'])){
    $arreglo_respuestas["name"] = 'Name is required';
  }else{
    $name = test_input($_POST['name']);
  }
  if(empty($_POST['number'])){
    $arreglo_respuestas["number"] = 'Number is required';
  }else{
    $number = test_input($_POST['number']);
  }      
}
echo json_encode($arreglo_respuestas);

JS

var arreglo_respuestas = JSON.parse(phpRequest.responseText);

Entonces la variable arreglo_respuestas puede ser tratada como un arreglo normal de JavaScript (que tambien son considerados como objetos) y puedes obtener los valores de allí para ponerlos en donde quieras. Por ejemplo:

var error_name = arreglo_respuestas.name;
var erro_number = arreglo_respuestas.number;

Y en alguna otra parte de tu JS, puedes asignar esos valores a tus span:

document.getElementById("spanName").innerHTML = error_name;
document.getElementById("spanNumber").innerHTML = erro_number;

P.D. En la última parte asumí que tus span tienen ID, porque es la única forma de diferenciarlos fácilmente.

2
  • Gracias por tu respuesta @Kenny y disculpa por responder tan tarde. He estado tratando de implementarla en mi código, creo que funciona pero se esta imprimiendo 'undefined' en vez de las cadenas de mis variables. Acabo de editar mi pregunta, si no es mucha molesta podrías revisar mi código nuevo?
    – GhostOrder
    Commented el 24 jul. 2017 a las 18:22
  • Si, te dejare un comentario en la pregunta. Commented el 24 jul. 2017 a las 18:23

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.