Javascript - validate form if it is clicked

0

Within a <form> I have two forms but one is not required, only if the person wants to enter a new address. the problem that happens is that regardless of whether the person clicks on the checkbox, 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;
    }   
}
    
asked by anonymous 06.05.2017 / 13:54

1 answer

0

Since you want to check the doornumber , road , postcode , and country fields 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 do not know if you do this in another part of the code, but if so, you can disregard this part of the answer and what interests you is possibly only the if added in the function Validatedatacheckout .

    
06.05.2017 / 16:53