Javascript - validate form if clickado

Question

Within a <form> I have two formularies but one is not mandatory, only if the person wants to enter a new address. the problem that this happens is that regardless of whether the person clicks on the checkbox, the javascript validation requires the user to fill in the checkbox data even if the checkbox is not clicked. Is there any way around this with javascript?

HTML code:

<form name="form" action="orders.php" method="POST" onsubmit="return Validatedatacheckout()" >
<table id="address" style="display:none">
    <tr>
    <td> 
    Door number:<input type="text" placeholder="doornumber" name="doornumber" value=""  id="doornumber">
    Road:<input type="text" placeholder="road" name="road" value=""  id ="road">
    Country:<input type="text" placeholder="country" name="country" value="" id="country">
    Post Code:<input type="text" placeholder="postcode" name="postcode"  value=""  id="postcode"> </td>
    </tr>
</table>
<label><input name ="differentAddress" id="differentAddress" type='checkbox'>Use a different home address</label>
    <br>
    <br>
    <h5>Please enter your bank details.</h5>
<div class="form-container">
    <span class="input-label">First Name:</span><input type="text"  placeholder="First name" name="firstName"> <br>
    <span class="input-label">Last Name:</span><input type="text" name="lastName"  placeholder="Last Name"> <br>
    <span class="input-label">Account Number:</span><input type="text" name="accountnumber"  placeholder="account number" onkeypress="return justNumber(event)"> <br>
    <span class="input-label">Security Number:</span><input type="text" name="securitynumber"  placeholder="security number" onkeypress="return justNumber(event)">
</div>
    <br>
    <br>
<input id="checksub" type="submit" value="Submit">
</form>

JAVASCRIPT:

function Validatedatacheckout(){
    var doornumber = document.form.doornumber;
    var road= document.form.road;
    var postcode = document.form.postcode;
    var country = document.form.country;
    var accountnumber = document.form.accountnumber;
    var securitynumber = document.form.securitynumber;

    if (doornumber.value == "")
    {
        window.alert("Please enter a door number.");
        doornumber.focus();
        return false;
    }
       if (road.value == "")
    {
        window.alert("Please enter a road name.");
        road.focus();
        return false;
    } 

    if (postcode.value == "")
    {
        window.alert("Please enter a post code.");
        postcode.focus();
        return false;
    }
    if (country.value == "")
    {
        window.alert("Please enter a country.");
        country.focus();
        return false;
    }

    if (accountnumber.value == "")
    {
        window.alert("Please enter an account number.");
        accountnumber.focus();
        return false;
    }
     if (securitynumber.value == "")
    {
        window.alert("Please enter a security number.");
        securitynumber.focus();
        return false;
    }   
}

Answer 1

Whereas you want to check the fields doornumber, road, postcode and country only if differentAddress is selected, you can do something like:

// Pega o elemento checkbox:
var differentAddress = document.getElementById("differentAddress");

// Pega o elemento que será exibido quando o checkbox for marcado:
var address = document.getElementById("address");

// Exibe ou oculta a parte do formulário quando o checkbox estiver marcado:
differentAddress.onchange = function(event) {
  if (differentAddress.checked) {
    address.style.display = 'block';
  } else {
    address.style.display = 'none';
  }
};

function Validatedatacheckout() {
  var doornumber = document.form.doornumber;
  var road = document.form.road;
  var postcode = document.form.postcode;
  var country = document.form.country;
  var accountnumber = document.form.accountnumber;
  var securitynumber = document.form.securitynumber;

  // Verifica se o checkbox está marcado:
  if (differentAddress.checked) {
    if (doornumber.value == "") {
      window.alert("Please enter a door number.");
      doornumber.focus();
      return false;
    }
    
    if (road.value == "") {
      window.alert("Please enter a road name.");
      road.focus();
      return false;
    }

    if (postcode.value == "") {
      window.alert("Please enter a post code.");
      postcode.focus();
      return false;
    }
    
    if (country.value == "") {
      window.alert("Please enter a country.");
      country.focus();
      return false;
    }
  }

  if (accountnumber.value == "") {
    window.alert("Please enter an account number.");
    accountnumber.focus();
    return false;
  }
  
  if (securitynumber.value == "") {
    window.alert("Please enter a security number.");
    securitynumber.focus();
    return false;
  }
  
  alert("Tudo ok");
}

<form name="form" action="orders.php" method="POST" onsubmit="return Validatedatacheckout()">
  <table id="address" style="display:none">
    <tr>
      <td>
        Door number:<input type="text" placeholder="doornumber" name="doornumber" value="" id="doornumber"> Road:
        <input type="text" placeholder="road" name="road" value="" id="road"> Country:
        <input type="text" placeholder="country" name="country" value="" id="country"> Post Code:<input type="text" placeholder="postcode" name="postcode" value="" id="postcode"> </td>
    </tr>
  </table>
  <label><input name ="differentAddress" id="differentAddress" type='checkbox'>Use a different home address</label>
  <br>
  <br>
  <h5>Please enter your bank details.</h5>
  <div class="form-container">
    <span class="input-label">First Name:</span><input type="text" placeholder="First name" name="firstName"> <br>
    <span class="input-label">Last Name:</span><input type="text" name="lastName" placeholder="Last Name"> <br>
    <span class="input-label">Account Number:</span><input type="text" name="accountnumber" placeholder="account number" onkeypress="return justNumber(event)"> <br>
    <span class="input-label">Security Number:</span><input type="text" name="securitynumber" placeholder="security number" onkeypress="return justNumber(event)">
  </div>
  <br>
  <br>
  <input id="checksub" type="submit" value="Submit">
</form>

I added a code to display or hide the part of the form as the checkbox is checked or not. I don’t know if you do it elsewhere in the code, but if you do, you can disregard that part of the answer and what you possibly care about is just the if added in function Validatedatacheckout.