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);
echo json_encode($errors);
despues de tu if en PHP. Te esta dando undefined porque no existe ese nombre en el objeto de JS.var errorName = phpRequest.nameErr;
debes ponervar errorName = errorMessages.nameErr;
porque fue enerrorMessages
donde guardast el JSON ya convertido. Y lo mismo para la parte del number.