在使用jquery的chosen下拉列表的插件时，碰到了使用jquery.validate.js的冲突

在使用jquery的chosen下拉列表的插件时，碰到了使用jquery.validate.js的冲突，不能进行空值校验,chosen插件本身自动隐藏了空值，所以校验不到

解决方法：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
    siteMesh test System
</title>
  <link rel="stylesheet" href="docsupport/style.css">
  <link rel="stylesheet" href="docsupport/prism.css">
  <link rel="stylesheet" href="chosen.css">

  <style>


  </style>

  <script src="jquery-1.8.2.min.js" type="text/javascript"></script>
  <script src="chosen.jquery.js" type="text/javascript"></script>
  <script src="docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
  <script src="jquery.validate.min.js" type="text/javascript"></script>
  <script src="jquery.metadata.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function(){
        $('.chosen').chosen({
           no_results_text: "没有匹配找这条记录",
            allow_single_deselect: true
        });



        $.validator.setDefaults({ ignore: ":hidden:not(select)" });
        $('form').validate({
            highlight: function(element) {
                $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        errorPlacement: function(error, element) {
            if(element.parent('.input-group').length) {
                error.insertAfter(element.parent());
            } else {
                error.insertAfter(element);
            }
        }
    });
    });

  </script>
</head>
<body>
<form>
    <div class="form-group">
        <select name="id_tipo_equipo" style="width:300px" id="id_tipo_equipo" class="form-control chosen" data-placeholder="请选择一个..." required> 
              <option value="1" >Access Point</option>
            <option value="2" >Adaptador</option>
            <option value="3" >Adaptador DVI a VGA</option>

        </select>
    </div>
    <div class="form-group">
        <button class="btn btn-success" type="submit">Validate!</button>
    </div>
</form>
this is a Body
</body>
</html>

在使用jquery的chosen下拉列表的插件时，碰到了使用jquery.validate.js的冲突

猜你喜欢