如何一起使用 bootstrap 4 切换按钮和 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

可以使用bootstrap切换

<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>

请在下面找到文档 link 以进行更多自定义

http://www.bootstraptoggle.com/

如何一起使用 bootstrap 4 切换按钮和 jquery 验证插件

How to use bootstap4 toogle button and jquery validation plugin together

jquery

jquery-validate

twitter-bootstrap