How to show Next button if all required fields are filled in multipage form

By: sas bdss | Asked: 10/29/2021
ForumsCategory: Code HelpHow to show Next button if all required fields are filled in multipage form
sas bdss asked 2 years ago
Hello, 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 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. Here is my code : 
jQuery(document).ready(function($){
console.log("pret");
$('.frm_button_submit').css('visibility','hidden');
$(document).bind('keyup change','.frm_opt_container input', function() {
console.log("Key detected");
var ok = true;
//check si cahque container est filled
$('.frm_required_field .frm_opt_container:visible').each(function(index) {
console.log($(this)); //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){
console.log("Ce container est vide : " + index);
ok = false;
return false;
} });

//check si les input text sont vides
var input_not_text = '.frm_required_field:visible input:not(:checkbox):not(:radio)';
$(input_not_text).each(function(index) {
if ( $(this).val().length == 0 ) {
console.log("Ce input texte est vide : " + index);
ok = false;
return false;
}
});
console.log("affiahge du bouton ?" + ok);

if (!ok) {
jQuery('.frm_button_submit').css('visibility','hidden');
} else {
jQuery('.frm_button_submit').css('visibility','visible');
}
});



});
2 Answers
sas bdss answered 2 years ago
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');
}
});



});  
Jane Onorati answered 2 years ago
I'm curious why do you need to do this.  If a required field is not filled in, the user will get an error message when they click on the Next button and not be able to go to the next page until they fix it.  -Jane

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right