I'm posting, because i was looking for a solution and I didn't find any answer. I managed to code something that works.
I have a Wordpress Website with the Formidable Form plug-in.
I want to hide the "Next" button on a multipage form by default, and show it only when all required fields are filled. Whether it's radio, checkbox or text input.
Of course, it's not the best code and can be optimized. This can work for classic form with some twists on classes.
jQuery(document).ready(function($){
$('.frm_button_submit').css('visibility','hidden');
$(document).bind('keyup change','.frm_opt_container input', function() {
var ok = true;
$('.frm_required_field .frm_opt_container:visible').each(function(index) {
//check si il y au moins un field coche
var fields_empty = true;
$(this).find("input[type=checkbox], input[type=radio]").each(function(index) {
if ( $(this).is(':checked') ) {
fields_empty = false;
return false;
}
});
if(fields_empty){
ok = false;
return false;
}
});
var input_not_text = '.frm_required_field:visible input:not(:checkbox):not(:radio)';
$(input_not_text).each(function(index) {
if ( $(this).val().length == 0 ) {
ok = false;
return false;
}
});
if (!ok) {
jQuery('.frm_button_submit').css('visibility','hidden');
} else {
jQuery('.frm_button_submit').css('visibility','visible');
}
});
});