时间戳

首页 > 解决方案 > 如何一起使用 bootstap4 工具按钮和 jquery 验证插件

jquery - 如何一起使用 bootstap4 工具按钮和 jquery 验证插件

问题描述

我想检查切换按钮是否已使用 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>

错误标签显示在按钮内部而不是按钮侧面，那么我该如何实现呢？

标签： jquerytwitter-bootstrapjquery-validate

解决方案

您可以使用引导切换

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

推荐阅读