Metodología: Validar formulario en php -> respuesta devuelta mediante ajax - jquery

[AngelFelix]

Bueno... creo que ya esta listo, dejo el código para su evaluación.

procesar.php

Código PHP:

  if(empty($_POST['nombre'])){
    
    $salida['error'] = 'Error campo nombre vacio';   
    echo  json_encode($salida);
    
    }else{
    
    $salida['exito'] = 'Nombre: '.$_POST['nombre'];
    echo  json_encode($salida);
 } 
   

El formulario y el el Jquery.

Código Javascript:

<script type="text/javascript">
$(document).ready(function(){
$('#formulario').submit(function(evento){ 
            evento.preventDefault();
            var formulario = $(this).serialize();         
                $.ajax({
                url: 'procesar.php',
                data: formulario,
                type: 'POST',
                dataType: 'json',
                success: function(datos){
              $('#resultado').text(JSON.stringify(datos, null, 1)); // Salida JSON
              $('#div-formulario').text(datos.exito).fadeIn('slow'); // Mensaje de respuesta. OK
              $('#error').text(datos.error).fadeIn('slow'); // Mesaje de error en validacion
            }
                    });
             
});
 });   
</script>
 

Código HTML:

<div id="div-formulario"> <!-- Mensaje de respuesta. OK -->
<div id="error"></div> <!-- Mesaje de error en validacion -->
 
<form id="formulario" method="post">
<input type="text" id="nombre" name="nombre" placeholder="Su nombre">
<input type="submit" value="Enviar">
</form>
</div>
<div id="resultado"></div> <!-- Salida JSON -->