Dynamic radio button requiered

Design help Custom code
1

Hello community,
I have some trouble to manage the validation of a form.
In CMS, i have put switch button to activate or desactivate some radio question Yes/No
If swith on, it activate label + radio button, if not the line is hide.
The probleme is if i put requierd field, and for a line the switch button is on off, so the line not appear, but the hide code still and the form can’t be validate cause the radio wasn’t checked. Any idea ? shoul i use custom code or javascript ?

In this case 2 line swith off on CMS, i can’t validate forms

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi there,

Form validation with hidden required fields can be handled effectively in Webflow. All form elements must be placed inside a form block for proper functionality. When using conditional visibility with switches, you can control which form fields are shown or hidden based on user interactions.

For required fields that may be hidden, consider these best practices:

  • Use the form block’s built-in validation settings
  • Ensure that hidden required fields are properly connected to their trigger conditions
  • Test the form thoroughly in preview mode to verify the validation behavior

You can find more detailed information about form anatomy and configuration in our form block documentation.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

The setup I prefer here is;

  • Wrap the section in a custom element <fieldset>
  • Write JS that hides and shows the fieldset as your switch button is toggled
  • As you show/hide it, also add/remove the disabled attribute from the fieldset

The end result is that you can suppress the validation of those fields within that section specifically.

1 Like
4

Hello, Thanks for your reply, always good advise :slight_smile:

So i’am still 0 in JS
The function look working until the last step

<script>
function requierField(submit_bt) {
      var filedset1 = document.getElementById('filedset1');
      var filedset2 = document.getElementById('filedset2');
      var filedset3 = document.getElementById('filedset3');
      var filedset4 = document.getElementById('filedset4');

        if ($(filedset1).hasClass('w-condition-invisible')){
		
        $("input[name=bus]").prop("disabled", true);
      
        }
 		  	else if ($(filedset2).hasClass('w-condition-invisible')){
			
         $("input[name=buffet]").prop("disabled", true);
      
        }
        else if ($(filedset3).hasClass('w-condition-invisible')){
		
         $("input[name=tableronde]").prop("disabled", true);
       
        }
  			else if ($(filedset4).hasClass('w-condition-invisible')){

        $("input[name=dinersoir1]").prop("disabled", true);
      
        }
  
  		  else {} 
         
     
}


document.getElementById('submit_bt').addEventListener('click', requierField); 








</script>

Any idea, its on the structure of my form ?

5

i have test

document.addEventListener("DOMContentLoaded", function () {
  const form = document.getElementById("wf-form-Reference-Event");

  form.addEventListener("submit", function (event) {
    // Sélectionne tous les champs requis
    const requiredFields = form.querySelectorAll("[required]");

    requiredFields.forEach(function (field) {
      // Vérifie si le champ est caché
      if (field.offsetParent === null) {
        field.removeAttribute("required"); // Supprime required pour éviter l'erreur
      }
    });
  });
});

and

document.getElementById('wf-form-Reference-Event').addEventListener('submit', function() {
  // Sélectionner tous les champs requis
  const requiredFields = this.querySelectorAll('[required]');
  
  requiredFields.forEach(function(field) {
    // Vérifier si le champ est masqué
    if (field.offsetParent === null) {
      // Désactiver le champ masqué
      field.disabled = true;
    }
  });
});
6

You’ll need to design your JS around your page structure, so I can’t guess where your code needs fixed.

The solution I gave is clean and doesn’t rely on anything like Webflow conditional invisibility, which would result from a very different setup.

If you need help with the coding, give me a shout in a direct message ( click my name here ), and I can share my details. I do a lot of custom form programming for freelancers & agencies here.