Tengo desarrollado un pequeño script wizard nativamente, algo distinto y diferente a los wizard normales.
Un poco de como funciona
Mi wizard evita perder los datos introducidos en el formulario y conserva el paso en el que se encuentra el usuario así la página se recargue o el usuario de clic en otro enlace por error o al cerrar la pestaña los datos y los pasos se conservan, con esto evito que el usuario tenga que repetir nuevamente los pasos desde cero (excepto si el usuario cierra el navegador).
El problema está que si el usuario deja campos vacíos del formulario, el usuario puede continuar/avanzar al siguiente paso y esto no debe suceder. Necesito validar los campos del formulario en cada paso para evitar que continúe al siguiente paso si los campos del formulario no están correctamente completados.
La idea es crear validaciones como por ejemplo los siguientes wizard o este otro wizard si dan clic en continuar al siguiente paso dejando los campos input
del formulario vacios este lanza un error por debajo o a los costados por cada uno de los campos input
vacíos evitando así continuar al siguiente paso.
En los ejemplos se puede observar que su validación la va validando de acuerdo a su contenedor dentro del paso actual, antes de continuar al siguiente paso.
La estructura HTML de mi wizard se podría decir que es la misma cada paso tiene su contenedor con su identificación única step1, step2, step3 etc...
<?php include 'php/wizard.php' ?>
<!-- dato importante para el funcionamiento wizard -->
<script type="text/javascript">
var step = <?php echo $step ?>;
var radio = <?php echo $radio ?>;
</script>
<form id="form">
<div id="step1" class="step">
<h1>Paso 1</h1>
<!-- Diferentes tipos de campo input u otros que se necesitan validar-->
<a href="#" onclick="show_step('2')">continuar</a>
</div>
<div id="step2" class="step">
<h1>Paso 2</h1>
<!-- Diferentes tipos de campo input u otros que se necesitan validar-->
<a href="#" onclick="show_step('1')">Atras</a>
<a href="#" onclick="show_step('3')">continuar</a>
</div>
<div id="step3" class="step">
<h1>Paso 3</h1>
<!-- Diferentes tipos de campo input u otros que se necesitan validar-->
<a href="#" onclick="show_step('2')">Atras</a>
<a href="#" onclick="show_step('4')">continuar</a>
</div>
<div id="step4" class="step">
<h1>Paso 4</h1>
<!-- Diferentes tipos de campo input u otros que se necesitan validar-->
<a href="#" onclick="show_step('3')">Atras</a>
<input><-- Finalizar
</div>
</form>
Mi Wizard
Nota: Las validaciones del formulario sé deben validar nativamente usando solo jQuery/PHP sin utilizar librerías u plugin.
function show_step(step){
var data = $( "#form" ).serialize();
var url = 'saveTemp.php?step=' + step;
// recuperamos el lavel del radio button seleccionado
//var valor_radio = $('input:radio[name=radio]:checked').next("label").text();
$.ajax({
type: "POST",
url: url,
data: data
}).done(function(resp){
step = parseInt(step);
$('#address').val(resp.address);
$('#email').val(resp.email);
$('#name').val(resp.name);
$('#phone').val(resp.phone);
$('#radio').val(resp.radio);
$('#username').val(resp.username);
if (step === 2) {
var radio = parseInt(resp.radio);
switch(radio) {
case 1:
urlform = './app/themes/pay_paypal.php'
break;
case 2:
urlform = './app/themes/pay_paypal2.php'
break;
case 3:
urlform = './app/themes/pay_paypal3.php'
break;
default:
urlform = './app/themes/pay_paypal4.php'
break;
}
$('#divPago').load(urlform,function(responseTxt, statusTxt, xhr){
if(statusTxt === "success") {
$('.step').css( "display", "none" );
$('#step'+ step).fadeIn("slow");
animacion(step);
}
if(statusTxt === "error") {
//
}
});
} else {
$('.step').css( "display", "none" );
$('#step'+ step).fadeIn("slow");
animacion(step);
}
});
};
$(function() {
show_step(step);
});
pay_paypal.php
. Según tú, ¿de dónde deberían venir esas variables? Si tú quieres manejarlas enpay_paypal.php
o en otro archivo tendrás que pasárselas de algún modo.cart.php
y tú quieres agregar la plantilla desde allí entonces puedes pasar las variables perfectamente a través de Ajax y recuperar en eldone
la respuesta dada para actualizar el contenido decart.php
. Algo parecido a la pregunta en la que tienes abierta recompensa. Allí te recomendé usarload
porque no sabía que tenías que pasar datos a los archivos php que llamas en elload
.JS
oPHP
? ¿Usas alguna librería? Por favor, edita tu pregunta y agrega el código.JS
, pero también son necesarias enPHP
, de lo contrario nada evita que te lo "hackeen". Volviendo a las validaciones enJS
, te diría que es necesario que definas si quieres usar una lib (cual) o no.