bootstrapvalidator表单验证错题提示图标不显示问题

Delphi小叮当 2017-02-23 01:08:23
今天我用bootstrapvalidator进行测试表单验证，我按照集团的范例进行了代码的粘贴。发现我的页面没有官方的错误和正确的提示图标


我的只有简单的文字提示


下面是我的代码，求指导。谢谢

文件引用
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.css"/>

    <link rel="stylesheet" href="dist/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="vendor/jquery/jquery-1.10.2.min.js"></script>

    <script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <script type="text/javascript" src="dist/js/bootstrapValidator.js"></script>


html代码
<form action="remote.php" method="post" id="defaultForm">

<div class="container">

<div class="row">



<div>

<div class="col-md-3 col-xs-3 col-sm-12">

<label for="name"><i class="fa fa-address-card-o"></i> 学生姓名*</label>

</div>

<div class="col-md-3 col-xs-3 col-sm-12">

<label for="name"><i class="fa fa-mobile"></i> 联系方式*</label>

</div>

<div class="col-md-3 col-xs-3 col-sm-12">

<label for="name"><i class="fa fa-mars"></i> 学生性别</label>

</div>

<div class="col-md-3 col-xs-3 col-sm-12">

<label for="name"><i class="fa fa-mortar-board"></i> 就读学校</label>

</div>





<div>

<div class="col-md-3 col-xs-3 col-sm-12"><input type="text" class="form-control" name="stuname" placeholder="请输入学生姓名"></div>

<div class="col-md-3 col-xs-3 col-sm-12"><input type="text" class="form-control" name="stuphone" placeholder="请输入联系方式"></div>

<div class="col-md-3 col-xs-3 col-sm-12"><select class="form-control" name="stugender">

		<option>下拉选择</option>

    <?php  foreach  ($gender as $v): ?>

         <option value="<?php echo $v['sitem2'] ?>"><?php echo $v['sitem2'] ?></option>

      

         <?php endforeach ?>

      </select></div>



<div class="col-md-3 col-xs-3 col-sm-12"><input type="text" class="form-control" name="stuschool" placeholder="请输入就读学校"></div>

</div>







<div>

<div class="col-md-9 col-xs-9 col-sm-12">

<label for="name"><i class="fa fa-id-badge"></i> 身份证号*</label>

</div>

<div class="col-md-9 col-xs-9 col-sm-12">

<input type="text" class="form-control" name="stuid" placeholder="请输入身份证号">

</div>

</div>

</div>

</div>

</div>



<div class="container">

<div class="row">

<hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15)" color="#FF0000" width="90%" size="1" />

</div>



</div>





<div class="container">

<div class="row">



<div class="col-md-3 col-xs-3 col-sm-12">

<label for="name"><i class="fa fa-clone"></i> 班级编码*</label>

</div>

<div class="col-md-3 col-xs-3 col-sm-12">

<label for="name"><i class="fa fa-pencil-square"></i> 订单号*</label>

</div>

<div class="col-md-3 col-xs-3 col-sm-12">

<label for="name"><i class="fa fa-credit-card"></i> 支付金额*</label>

</div>

<div class="col-md-3 col-xs-3 col-sm-12">

<label for="name"><i class="fa fa-calendar"></i> 支付日期*</label>

</div>







<div class="col-md-3 col-xs-3 col-sm-12"><input type="text" class="form-control" name="classid" placeholder="请输入班级编码"></div>

<div class="col-md-3 col-xs-3 col-sm-12"><input type="text" class="form-control" name="orderid" placeholder="请输入订单号"></div>

<div class="col-md-3 col-xs-3 col-sm-12"><input type="text" class="form-control" name="orderamount" placeholder="请输入支付金额"></div>

<div class="col-md-3 col-xs-3 col-sm-12"><div class="input-group">

        <span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>

        <input type="text" id="calendar"  name= "orderdate" placeholder="请选择日期" class="form-control">

      </div></div>







<div class="col-md-6 col-xs-6 col-sm-12">

<label for="name"><i class="fa fa-cc-paypal"></i> 支付方式*</label>

</div>



<div class="col-md-6 col-xs-6 col-sm-12">

<label for="name"><i class="fa fa-envelope"></i> 备注信息</label>

</div>







<div class="col-md-6 col-xs-6 col-sm-12">

<select class="form-control" name="orderway">

		<option>下拉选择</option>

    <?php  foreach  ($orderway as $v): ?>



         <option value="<?php echo $v['sitem2'] ?>"><?php echo $v['sitem2'] ?></option>

    <?php endforeach ?>

      </select>



</div>



<div class="col-md-6 col-xs-6 col-sm-12">



<input type="text" class="form-control" name="remark" placeholder="备注信息">

</div>





</div>

</div>



<div class="container">

<div class="row">

<hr style="filter:progid:DXImageTransform.Microsoft.Shadow(color:#FF0000,direction:145,strength:15)" color="#FF0000" width="90%" size="1" />

</div>

</div>





<div class="container">

<div class="row">



<div class="col-md-2 col-sm-12 col-xs-2  pull-right">

<button class="btn btn-primary btn-block" type="submit" name="signup">提交</button>



</div>

<div class="col-md-2 col-sm-12 col-xs-2  pull-right">



<button class="btn btn-warning btn-block" type="reset">重置</button>

</div>



</div>

</div>

</form>


表单验证的JS代码

<script type="text/javascript">

$(document).ready(function() {



    function randomNumber(min, max) {

        return Math.floor(Math.random() * (max - min + 1) + min);

    };

    $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));



    $('#defaultForm').bootstrapValidator({

//        live: 'disabled',

        message: 'This value is not valid',

        feedbackIcons: {

            valid: 'glyphicon glyphicon-ok',

            invalid: 'glyphicon glyphicon-remove',

            validating: 'glyphicon glyphicon-refresh'

        },

        fields: {

            stuname: {

                validators: {

                    notEmpty: {

                        message: '学生姓名不能为空'

                    }

                }

            },

            stuphone: {

                validators: {

                    notEmpty: {

                        message: '联系方式不能为空'

                    }

                }

            },

            stuid: {

                message: '身份证号不能为空',

                validators: {

                    notEmpty: {

                        message: '身份证不能为空'

                    },

                    stringLength: {

                        min: 16,

                        max: 20,

                        message: '身份证号码长度不符合'

                    }

 

                }

            },



            classid: {

                validators: {

                    notEmpty: {

                        message: '班级编码不能为空'

                    }



                }

            },



            orderid:{

                validators: {

                    notEmpty: {

                        message: '订单号不能为空'

                    }



                }

            },



          orderamount:{

                validators: {

                    notEmpty: {

                        message: '支付金额不能为空'

                    }



                }

            },



          orderdate:{

                validators: {

                    notEmpty: {

                        message: '支付日期不能为空'

                    }



                }

            },

          orderway:{

                validators: {

                    notEmpty: {

                        message: '支付方式不能为空'

                    }



                }

            },

          

            gender: {

                validators: {

                    notEmpty: {

                        message: 'The gender is required'

                    }

                }

            },

            'languages[]': {

                validators: {

                    notEmpty: {

                        message: 'Please specify at least one language you can speak'

                    }

                }

            },

            'programs[]': {

                validators: {

                    choice: {

                        min: 2,

                        max: 4,

                        message: 'Please choose 2 - 4 programming languages you are good at'

                    }

                }

            },





            captcha: {

                validators: {

                    callback: {

                        message: 'Wrong answer',

                        callback: function(value, validator) {

                            var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);

                            return value == sum;

                        }

                    }

                }

            }

        }

    });



});

</script>




我检查了一下图标的显示应该是这一段代码
但是我不知道怎么修改 请各位大神指点一下 谢谢

    $('#defaultForm').bootstrapValidator({

//        live: 'disabled',

        message: 'This value is not valid',

        feedbackIcons: {

            valid: 'glyphicon glyphicon-ok',

            invalid: 'glyphicon glyphicon-remove',

            validating: 'glyphicon glyphicon-refresh'

        },

...全文
3167 5 打赏 收藏 转发到动态 举报
写回复
用AI写文章
5 条回复
切换为时间正序
请发表友善的回复…
发表回复
故里明月 2019-11-25
  • 打赏
  • 举报
 回复
<div class="modal-body"> <div class="form-group"> <label for="inputStatus" class="col-lg-3 control-label">父级类别</label> <select class="form-control custom-select" id="categoryId" name="categoryId"> <option value="0">请选择</option> </select> </div> <div class="form-group"> <label for="inputName" class="col-lg-3 control-label">分类编号</label> <input type="text" id="categoryCode" name="categoryCode" class="form-control" placeholder="请输入类别编号"> </div> <div class="form-group"> <label for="inputName" class="col-lg-3 control-label">分类名称</label> <input type="text" id="categoryName" name="categoryName" class="form-control" placeholder="请输入类别名称"> </div> </div> 我就是这样写的 为啥还是没有样式呢
饺子进水啦 2018-12-17
  • 打赏
  • 举报
 回复
<div class="form-group"> <div class="col-xs-10"> <input type="text" class="form-control" name="graduateDate" style="border: 1;box-shadow: 0px 0px 0px 0px;text-align: right"> </div> </div>
qq_37272397 2018-01-05
  • 打赏
  • 举报
 回复
form-group应该放在哪里，求解决。。。。
qq_37666286 2017-02-26
  • 打赏
  • 举报
 回复
这网站人气好低。。
Delphi小叮当 2017-02-23
  • 打赏
  • 举报
 回复
已经解决了 来人领分 内容要放在 form-group中 图标才能出现
bootstrapvalidator 表单验证
bootstrapvalidator 表单验证bootstrapvalidator 表单验证bootstrapvalidator 表单验证bootstrapvalidator 表单验证
bootstrapValidator表单验证插件
bootstrapValidator表单验证插件
SpringMVC+Mybatis+Shiro+Bootstrap实战
快速增长实战经验的课程技术选型：核心框架：Spring Framework 4.X视图框架：Spring MVC 4.X持久层框架：MyBatis 3.X /Mybatis-plus 2.1.8表格插件：Bootstrap Table表单验证插件：BootstrapValidator日期选择插件：Datepicker for Bootstrap数据图表：charts表单美化插件：ICheck树形视图插件：Ztree 数据库       Mysql5+Druid安全框架：Apache Shiro数据库连接池：Druid日志管理：SLF4J、Log4j页面交互：BootStrap、Layer等
BootstrapValidator验证表单插件
BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件BootstrapValidator验证表单插件
好用的bootstrapvalidator表单验证
bootstrap下最好用的表单验证组件，让复杂的表单验证简单化。。。
HTML5

39,087

社区成员

5,547

社区内容

发帖
与我相关
我的任务
社区描述
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。
社区管理员
  • HTML5社区
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章