Jquery проверить пользовательский флажок CSS

Question

Есть ли способ проверить следующий флажок?

<form name="rmn-form" id="rmn-form" action="send.php" enctype="multipart/form-data" method="POST">
  <div class="row">
    <div class="col-md-12 col-xs-12">
      <div class="rmn-input-field">
        <label for="gdpr" class="checkbox-container"> Accept terms and conditions
          <input type="checkbox" checked="checked" id="gdpr" name="gdpr">
          <span class="checkmark"></span>
        </label>
      </div>
    </div>
  </div>

  <button type="submit" name="submit" id="submit-all" class="waves-effect waves-light btn submit-button pink mt-30">Send</button>
</form>

Флажок генерируется https://www.w3schools.com/howto/howto_css_custom_checkbox.asp

У меня есть следующий JSFiddle с моим кодом с библиотекой начальной загрузки и jquery.validate.min.js: http://jsfiddle.net/2837qdeu/

Answer 1

Вы также можете сами управлять этим, как показано ниже:

 $("[name=submit]").click(function(){
    if ( $('#gdpr').is(':checked') ){
        alert('submit will proceed - checkbox is checked') //This alert not required, only added for demo
    }else{
        alert('Error - submit will not proceed');
        return false; //<== Here is the magic, along with checking that the box is checked
    }
 });

Пересмотрено jsFiddle

---

return false остановит процедуру отправки, что позволит вам отобразить сообщение или выполнить некоторые js wizardry, прежде чем вернуть управление пользователю.

Answer 2

Я добавил следующую строку в JS-файл, и он работал просто отлично:

$("#rmn-form").validate({
    ignore: ':hidden:not(:checkbox)',
    ....
});

Answer 3

Просто измените ваш тег ввода на код ниже

<input type="checkbox" required="required" id="gdpr" name="gdpr">

Перед отправкой будет проверено, должен ли этот флажок быть установлен.

Fiddle