Omití le resto dl código porque no crei que el error estuviese ahí pero tómalo:
- Si el campo está vacio (input) si para la ejecución
empty.addClass("error");
return false;
- pero al hacer la comprobación de los radio no la para y no sé porqué
Código Javascript
:
Ver original<script>
$(function() {
$(":button#validar").click(function () {
var $elegido =$("input[name=pi1]:checked");
if ($elegido.val()) {
alert("SELECCIONADO " +$elegido.val());
} else {
alert("NINGUN VALOR SELECCIONADO");
return false;
}
});
var root = $("#wizard").scrollable();
// creamos las dos variables que necesitaremos
var api = root.scrollable(), drawer = $("#drawer");
// parte logica usada en la validacion
api.onBeforeSeek(function(event, i) {
// recorremos toda la pagina
if (api.getIndex() < i) {
// en que pagina estamos
var page = root.find(".page").eq(api.getIndex()),
// buscamos los campos requeridos
inputs = page.find(".required :input").removeClass("error"),
// y comprobamos si estan vacios
empty = inputs.filter(function() {
return $(this).val().replace(/\s*/g, '') == '';
});
// si hay un campo vaco vamos a colorearlo
if (empty.length) {
drawer.slideDown(function() {
// coloreamos usando estilos jquery
drawer.css("backgroundColor", "#229");
setTimeout(function() { drawer.css("backgroundColor", "#fff"); }, 1000);
});
empty.addClass("error");
return false;
// si todo esta bien seguimos
} else {
// ocultamos la barra de aviso
drawer.slideUp();
}
}
// actulizamos la barra de estado
$("#status li").removeClass("active").eq(i).addClass("active");
});
// si persionamos siguiente nos vamos a pagina actual + 1
root.find("button.next").keydown(function(e) {
if (e.keyCode == 9) {
// ejecutamos la validacion logica
api.next();
e.preventDefault();
}
});
});
</script>