Javascript / HTML: Once Checkbox is clicked on, form fields then become required?

Please bear with me, and I hope I am clear with my question. I don't understand javascript that well, but I am trying to perform a certain task with it. Here is my questions;

I am using a checkbox and it shows/hides fields upon clicking the checkbox. I would like to make my fields required to input information only when I click on the checkbox and the fields are showing. When the fields are hidden, and the checkbox is not clicked on, then those fields are not required to input information. How do I make this happen. This is the code that I am using;

<script type="text/javascript" language="JavaScript">
function HidePart(d) { 
document.getElementById(d).style.display = "none";
}
function ShowPart(d) { 
document.getElementById(d).style.display = "block"; 
}
function CheckboxChecked(b,d)
{
if(b) {
ShowPart(d); 
}
else  { 
HidePart(d); 
}
}
</script>


  <input type="checkbox" name="Loan2" value="yes" onclick="CheckboxChecked(this.checked,'checkboxdiv2')"> Add New Loan


<div id="checkboxdiv2" style="display:none">
Form Fields for input information
</div> 

If this helps, this is my website: https://www.slfpusa.org/testing-page/. When I click on "Add New Loan", it produces more fields that I would like to only be required once they are showing. I hope my question is clear, and I hope to get some help in tweaking this javascript code to function to the way I need it to function. Any help would be much appreciated!