Required fields on form with 2 dynamic div

Question

I must set all the fields on my form as required. However, my form has 2 div which is dependent on a <select> the fields on the form are dynamic, depending on the gender selected.

Here is my HTML

<form method="POST" onsubmit="showSuccessMessage()">
    <label for="name">Full Name: </label><input id="name" maxlength="80" name="name" size="20" type="text" required/><br />
    <select id="gender" title="Gender" onchange="checkGender() required">
        <option value="Male></option>
        <option value="Female></option>
    </select>
    <div id="femaleFields">
        //female fields here which are all required
    </div>
    <div id="maleFields">
       //male fields here which are also required
    </div>
</form>
<script>
 function checkChargingProduct(){
   var selectedGender = document.getElementById("gender").value;
   var maleFields = document.getElementById("maleFields");
   var femaleFields = document.getElementById("femaleFields ");

   if(selectedGender === "Male"){
     femaleFields.style.display = "none";
     maleFields.style.display ="block"
   }else{
     femaleFields.style.display = "block";
     maleFields.style.display ="none"    
   }
 }
</script>

And when I try to submit my form, nothing happens, what I suspect is that the female fields are null or blank when I try to submit the male form.

Is this possible on this approach? Or should I create 2 separate forms for the 2 divs. Thanks!

Answer 1

Just add the required attribute conditionally based on the display of the corresponding div element :

<script>
    function checkGender() {
        var selectedGender = document.getElementById("gender").value;
        var maleFields = document.getElementById("maleFields");
        var femaleFields = document.getElementById("femaleFields");
    
        if (selectedGender === "Male") {
            femaleFields.style.display = "none";
            maleFields.style.display = "block";
            document.getElementById("maleField1").required = true;
            document.getElementById("maleField2").required = true;
            document.getElementById("femaleField1").required = false;
            document.getElementById("femaleField2").required = false;
        } else {
            femaleFields.style.display = "block";
            maleFields.style.display = "none";
            document.getElementById("maleField1").required = false;
            document.getElementById("maleField2").required = false;
            document.getElementById("femaleField1").required = true;
            document.getElementById("femaleField2").required = true;
        }
    }
</script>