Autor: uli5tudio

Tener siempre en cuenta la experiencia de usuarios.

Imaginaos un formulario con muchos campos para rellenar. El usuario los ha rellenado todos, y al presionar el botón de enviar, resulta que hay un error en un campo y ha de volver a rellenar el formulario.

Ningún campo ha sido guardado de forma temporal y por lo tanto al refrescar la página los campo vuelven a estar vacíos y el usuario ha de volver a rellenar cada uno de los campos del formulario.

Esto sucede sobre todo si se validan los campos en el lado del servidor, por lo que es recomendable validarlos del lado del cliente con JavaScript, y prevenir que la página envíe los datos hasta que no estén todos los campos bien rellenados.

Vale, si somos de los que validamos en el servidor, ya sea por exigencias o por el método de trabajo que se requiera, existe un método muy sencillo para que estos datos no se pierdan hasta que no sean todos los campos validados y se ejecute la función de envío de los datos al servidor.

El recurso es trabajar con sesiones ($_SESSIONS[] ), pues puedes guardar los campos del formulario en la sesión del usuario y hasta que no se envíen los datos correctamente, éstos permanecerán almacenados.

En el ejemplo siguiente vemos como obtener los datos por método POST (sirve para ambos, GET y POST), los guardamos en variables. Estas variables las almacenamos en Elementos de la Sesión, y trabajamos con ellos.

Una vez que hemos realizado las funciones que se ha de ejecutar con estos datos, pues los eliminamos. Dejando la sesión libre de valores innecesarios.

if($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Obtenemos los datos y guardamos en variables
    $m_name = strip_tags($_POST['idName']);
    $m_email = strip_tags($_POST['idEmail']);
    $m_tel = strip_tags($_POST['idTelefono']);

    // Ahora guardamos los datos en variables de la sesión
    $_SESSION['m_name'] = $m_name;
    $_SESSION['m_email'] = $m_email;
    $_SESSION['m_telefono'] = $m_tel;

    // Ejecutamos el las funciones con estos valores
    echo $_SESSION['m_name'];
    echo $_SESSION['m_email'];
    echo $_SESSION['m_telefono'];

    // Eliminamos las variables de sesión y sus datos
    unset($_SESSION['m_name']);
    unset($_SESSION['m_email']);
    unset($_SESSION['m_telefono']);
}

En el ejemplo anterior no están las validaciones de los campos del formulario, crearé un post sobre cómo hacerlo desde el backend (próximamente).

Espero que hayan entendido el procedimiento, como ven es muy sencillo, y sólo es cuestión de usar una variables (las de sesión) en vez de las otras (las de captura de los datos por método post).

También podemos convertir las de sesión en variables, por si nos es más cómodo trabajar con ellas:

$name = $_SESSION['m_name'];
$mail = $_SESSION['m_email'];
$tel = $_SESSION['m_telefono'];

Bueno gente espero que lo usen y le den buena práctica.

Función para imprimir los errores cuando validamos campos en los formularios.

Lo pimero es la función:

function resultBlock($errores){
		echo "<div id='error' class='alert alert-danger text-center' role='alert'>		
		<a href='#' onclick=\"$('#error').addClass('d-none')\">[X]</a>
		<ul>";		
		echo "<li>".$errores."</li>";		
		echo "</ul>";
		echo "</div>";
}

Luego el uso de la variable $errores.

if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
        echo "El email es correcto";
    } else {
        $errores = "El email no es válido.";
    }

Ahora sólo nos toca ejecutar el código que estamos creando y mostrar los errores en caso que existan. Para ello validamos que no hay errores haciendo uso de if() {} y los errores los mostramos si existe alguno con else {}.

if($errores < 0) { 
//codigo a ejecutar sin no hay errores<br>
} else {
//mostramos los errores
echo resultBlock($errores); 
}

Y por último el css. Que en mi caso he usado bootstrap, así que ya lo tengo pero podéis poner el que ustedes quieran.

Listo!