联动插件和select美化插件配合表单验证插件的使用示例

HTML

CSS

JavaScript

HTML

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>联动插件和select美化插件配合表单验证插件的使用 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="http://lyear.itshubao.com/iframe/css/bootstrap.min.css" rel="stylesheet">
<link href="http://example.itshubao.com/demo/css/materialdesignicons.min.css" rel="stylesheet">
<link href="http://lyear.itshubao.com/css/style.min.css" rel="stylesheet">
</head>
  
<body>
<div class="container-fluid">
  
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header"><h4>联动插件和select美化插件配合表单验证插件的使用</h4></div>
        <div class="card-body">
          
          <p>为了避免默认的select表现太难看，所以新写了个插件bootstrap-lyear-select，可以单独使用，也可以配合联动插件使用，该页面中使用与否都可以正常验证。</p>
          <form action="#!" method="post" id="example-from">
            <div class="row">
              <div class="col-md-12">
                <div class="form-group">
                  <label>请选择地区</label>
                  <div class="clearfix" id="example-1"></div>
                </div>
              </div>
              <div class="col-xs-12">
                <button type="submit" class="btn btn-primary">确认提交</button>
              </div>
            </div>
          </form>
          
        </div>
      </div>
    </div>
    
  </div>
  
</div>

<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/jquery.min.js"></script>
<script type="text/javascript" src="http://lyear.itshubao.com/iframe/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/jquery-validate/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/jquery-validate/messages_zh.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/bootstrap-lyear-select.min.js"></script>
<script type="text/javascript" src="http://libs.itshubao.com/bootstrap-selectN.min.js"></script>
</body>
</html>

CSS

/* 联动插件验证新增 */
.has-error .d-inline-block .form-control {
    border-color: #ebebeb!important;
    box-shadow: none!important
}
.has-error .d-inline-block.is-invalid .form-control {
    border-color: #f96868!important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)!important;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075)!important;
}

/* select插件 */
.lyear-select {
    position: relative;
}
.lyear-select .form-control {
    background-color: #fff!important;
    cursor: pointer;
}
.lyear-select .dropdown-menu {
    min-width: 100%;
    max-height: 300px;
    overflow-y: auto;
}
.lyear-select .dropdown-menu a {
    cursor: pointer;
}
.lyear-select .dropdown-menu li.selected a,
.lyear-select .dropdown-menu li.selected:hover a {
    background-color: #33cabb;
    color: #fff;
}
.lyear-select .form-control {
    padding-right: 30px;
}
.lyear-select i.mdi {
    font-size: 20px;
    position: absolute;
    top: 3px;
    right: 5px;
}

JavaScript

$(document).ready(function(){
    var catData = [{"id":1,"name":"周边旅游","children":[{"id":24,"name":"广东","status":0,"children":[{"id":7,"name":"广州"},{"id":23,"name":"潮州"}]}]},{"id":5,"name":"国内旅游","children":[{"id":8,"name":"华北地区","children":[{"id":9,"name":"北京"}]}]},{"id":6,"name":"出境旅游","children":[{"id":10,"name":"东南亚","children":[{"id":11,"name":"马来西亚","children":[{"id":20,"name":"沙巴","children":[{"id":21,"name":"美人鱼岛","children":[{"id":22,"name":"潜水"}]}]}]}]}]}];
    
    var catIns1 = $('#example-1').bootstrapSelectN({
        data: catData,
        name: ['select1', 'select2', 'select3', 'select4', 'select5', 'select6'], // 如果要做验证，这里给所有的select命名，避免无法验证
    }, function(obj) {
        obj.rules('add', {
            required: true,
            messages:{
                required: '这是必填字段',
            }
        }); // 这个通过回调函数追加新增select的验证
    });
    
    var validator = $('#example-from').validate({
        ignore: ".ignore",    // 插件默认不验证隐藏元素,这里可以自定义一个不验证的class,即验证隐藏元素,不验证class为.ignore的元素
        focusInvalid: false,  // 禁用无效元素的聚焦
        rules: {
            'select1': {
                required: true
            }, // 默认给第一个验证
        },
        errorPlacement: function errorPlacement(error, element) {
            var $parent = $(element).parents('.form-group');
            if ($parent.find('.help-block').length) {
                return;
            }
            $parent.addClass('has-error');
            $parent.append(error.addClass('help-block'));
        },
        highlight: function(element) {
            var $el = $(element);
            if ($el.hasClass('selectN')) {
                $el.parent().addClass('is-invalid');
            }
        },
        unhighlight: function(element) {
            var $el = $(element);
            if ($el.hasClass('selectN')) {
                $el.parent().removeClass('is-invalid');
                var isInvalid = false;
                $('.selectN').each(function() {
                    if ($(this).parent().hasClass('is-invalid')) {
                        isInvalid = true;
                    }
                });
                if (!isInvalid) {
                    $el.parents('.form-group').removeClass('has-error');
                    $el.parents('.form-group').find('.error').remove();
                }
            } else {
                $el.parents('.form-group').removeClass('has-error');
                $el.parents('.form-group').find('.error').remove();
            }
        },
        submitHandler: function(form) {
            alert('验证成功');
        }
    });
});