WordPress+Formidable Forms多页表单实现：所有必填字段填写完成后显示「下一步」按钮

I spent hours digging for a working solution for this on my WordPress site with Formidable Forms and came up empty-handed—so I ended up writing my own code to make it happen. Here's the exact use case I solved:

Multi-page form where the "Next" button is hidden by default, and only becomes visible once all required fields on the current page (including radio buttons, checkboxes, text inputs, etc.) are properly filled out.

The Working Code #

document.addEventListener('DOMContentLoaded', function() {
    // Target the Next button in Formidable multi-page forms
    const nextButton = document.querySelector('.frm_next_button');
    // Hide the button on page load
    if (nextButton) nextButton.style.display = 'none';

    // Grab all required fields on the current form page
    const requiredFields = document.querySelectorAll(
        '.frm_form_field.required input, .frm_form_field.required select, .frm_form_field.required textarea, .frm_form_field.required input[type="radio"], .frm_form_field.required input[type="checkbox"]'
    );

    // Core function to check if all required fields are completed
    function validateRequiredFields() {
        let allFieldsCompleted = true;

        requiredFields.forEach(field => {
            // Handle radio button groups (at least one selected)
            if (field.type === 'radio') {
                const radioGroup = document.querySelectorAll(`input[name="${field.name}"]`);
                const hasSelection = Array.from(radioGroup).some(radio => radio.checked);
                if (!hasSelection) allFieldsCompleted = false;
            }
            // Handle checkbox groups (at least one selected)
            else if (field.type === 'checkbox') {
                const checkboxGroup = document.querySelectorAll(`input[name="${field.name}"]`);
                const hasSelection = Array.from(checkboxGroup).some(checkbox => checkbox.checked);
                if (!hasSelection) allFieldsCompleted = false;
            }
            // Handle text inputs, selects, textareas (non-empty value)
            else {
                if (!field.value.trim()) allFieldsCompleted = false;
            }
        });

        // Toggle button visibility based on validation result
        if (nextButton) {
            nextButton.style.display = allFieldsCompleted ? 'inline-block' : 'none';
        }
    }

    // Attach event listeners to required fields
    requiredFields.forEach(field => {
        if (field.type === 'radio' || field.type === 'checkbox') {
            field.addEventListener('change', validateRequiredFields);
        } else {
            field.addEventListener('input', validateRequiredFields);
        }
    });

    // Run validation once on initial page load
    validateRequiredFields();
});

Adaptations & Optimization Notes #

• Use for single-page forms: Just swap the button selector from .frm_next_button to your form's submit button class (like .frm_submit_button) and adjust the required fields selector if your form uses different classes.
• Room for improvement:
  • Turn selectors into configurable variables for easier reuse across different forms
  • Add visual feedback (like highlighting empty required fields) to guide users
  • Integrate with Formidable Forms' built-in JS hooks for more reliable field detection, especially if your form uses dynamic fields

内容的提问来源于stack exchange，提问作者Poup