Como agregar la validación en cada click en el botón de siguiente, actualmente está hasta el botón submit, pero el formulario real crecerá con al menos 10 fieldsets y varios inputs de tipo radio todos y, sería poco eficiente validar hasta enviar el formulario y tener que el usuario regrese hasta el fieldset con el input no seleccionado.
Por su ayuda, gracias.
< script >
$(document).ready(function() {
$("#alertaerror").hide();
var numforms = 1,
f_anterior, f_siguiente, total_forms;
total_forms = $("fieldset").length;
$(".form_siguiente").click(function() {
f_anterior = $(this).parent();
f_siguiente = $(this).parent().next();
f_siguiente.show();
f_anterior.hide();
});
$(".form_anterior").click(function() {
f_anterior = $(this).parent();
f_siguiente = $(this).parent().prev();
f_siguiente.show();
f_anterior.hide();
});
$("#frm_registro").submit(function(event) {
if (!$('input[name="radio1"]').is(':checked') || !$('input[name="radio2"]').is(':checked') || !$('input[name="radio3"]').is(':checked')) {
$('#alertaerror').fadeTo(1500, 500).slideUp(1000, function() {
$('#alertaerror').slideUp(1000);
});
return false;
} else {
return true;
}
});
}); <
/script>
Con este código funciona la validación hasta el submit, y considero que hacerlo en cada Filedset es lo mejor para el usuario, de momento no logro hacerlo, estoy iniciandome con Javascript y JQuery y me sigo documentando, esta es mi primer pregunta en el sitio. el formulario base es el siguiente:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style>
#frm_registro fieldset:not(:first-of-type) {
display: none;
}
div {
padding: 30px 0px 30px;
}
</style>
</head>
<body>
<form id="frm_registro" action="valida.php" method="post">
<fieldset id="fldset-1">
<div>
<input type="radio" id="html" name="languajefav" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="javascript" name="languajefav" value="JavaScript">
<label for="javascript">JavaScript</label>
</div>
<div>
<input type="radio" id="ie" name="navegador" value="Internet Explorer">
<label for="ie">Internet Explorer</label><br>
<input type="radio" id="mf" name="navegador" value="Mozilla Firefox">
<label for="javascript">Mozilla Firefox</label>
</div>
<input type="button" name="next" class="form_siguiente" value="Siguiente">
</fieldset>
<fieldset id="fldset-2">
<div>
<input type="radio" id="mysql" name="bdfavorita" value="MySQL">
<label for="mysql">MySQL</label><br>
<input type="radio" id="mssql" name="bdfavorita" value="SQL Server">
<label for="mssql">SQL Server</label><br>
</div>
<input type="button" name="previous" class="form_anterior" value="Anterior"/>
<input type="button" name="next" class="form_siguiente" value="Siguiente">
</fieldset>
<fieldset id="fldset-3">
<div>
<input type="radio" id="sublime" name="editorfav" value="Sublime Text">
<label for="sublime">Sublme Text 3</label><br>
<input type="radio" id="vstudio" name="editorfav" value="Visual Studio">
<label for="vstudio">Visual Studio</label><br>
</div>
<input type="button" name="previous" class="form_anterior" value="Anterior"/>
<input type="submit" name="submit" class="submit" value="Enviar Respuestas">
</fieldset>
</form>
</body>
</html>
Y aquí el código base funcionando https://jsfiddle.net/fherhuitron/a52syg36/4/
$(".form_siguiente").click(function() {
... pues hazlo... ¿cual es el problema?$('.fieldset1').each()
para los del primer fieldset,$('.fieldset2').each()
para los del segundo fieldset, etc... No se como construyes los fieldsets que dices, pero supongo que captas la idea del each asociado a una clase distinta para cada fieldset, no?