Обязательный флажок при оформлении заказа OpenCart - PullRequest
Новая
       7

Обязательный флажок при оформлении заказа OpenCart

0 голосов

Я хочу добавить пользовательский флажок ОБЯЗАТЕЛЬНО на странице оформления заказа в моей версии opencart 2.1.0.1 (с использованием темы журнала).Я легко создам его с этим <input type="checkbox", но как я могу использовать javascript, чтобы сделать его обязательным?

1 Ответ

0 голосов
/ 14 мая 2018

Просто проверьте атрибут checked вашего флажка. В соответствии с этим, отправьте свою форму или запретите ее отправку. 

function validate() {
  var checkbox = document.querySelector('#check');
  
  if (!checkbox.checked) {
    alert("Please check the checkbox!");
    return false;
  }
  return true;
}
<form onsubmit="return validate()" action="">
  <input type="checkbox" id="check">
  <button>Send</button>
</form>

Edit:

Если у вас нет form в вашем HTML, вы можете отключить кнопку отправки, пока флажок не будет установлен следующим образом: 

function enableSubmit() {
  var button = document.querySelector('#btn');
  var checkbox = document.querySelector('#check');
  
  if (checkbox.checked == false) {
    button.setAttribute('disabled', '');
  } else if (checkbox.checked == true) {
    button.removeAttribute('disabled');
  }
}
<input type="checkbox" id="check" onclick="enableSubmit()"><button type="submit" id="btn" disabled>Submit</button>

Редактировать 2

Если вы хотите отобразить только сообщение об ошибке, переключение видимости div будет вариант: 

function validate() {
  var checkbox = document.querySelector('#check');
  var errorDiv = document.querySelector('#error');
  
  if (checkbox.checked == false) {
    errorDiv.style.display = "block";
  } else if (checkbox.checked == true) {
    errorDiv.style.display = "none";
  }
}
#error {
  width: 100%;
  height: 20px;
  background-color: #f44b42;
}
<input type="checkbox" onclick="validate()" id="check"><button id="btn">Send</button>
<div id="error" style="display: block">Please check the checkbox.</div>
...