Как использовать Bootstap4 кнопку toogle и плагин проверки jquery вместе

Question

Я хочу проверить, нажата ли кнопка переключения или нет с помощью плагина проверки jquery.

$(document).ready(function() {
  $('form[id="my_form"]').validate({
    rules: {
      category_title: { required: true,},
      sort_order: {required: true,number: true,},
      options1: {required: true,},
    },
    submitHandler: function(form) {
        form.submit();
    }
  });
  $.validator.addMethod(
    "valueNotEquals",
    function(value, element, arg) {
        return arg !== value;
    },
    "Required."
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<div class="form-group">
  <label class="tags">Status</label>
  <div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary">
      <input type="radio" name="options1" id="option1" autocomplete="off" value="ON"> ON
    </label>
    <label class="btn btn-secondary">
      <input type="radio" name="options1" id="option2" autocomplete="off" value="OFF"> OFF
    </label>
  </div>
</div>

Метка ошибки отображается внутри кнопки, а не сбоку от кнопки, так как я могу ее достичь?

Answer 1

Вы можете использовать переключатель начальной загрузки

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>


<label class="checkbox-inline">
  <input type="checkbox" checked data-toggle="toggle"> First
</label>

Пожалуйста, найдите ссылку на документацию ниже для дополнительной настройки

http://www.bootstraptoggle.com/