jquery - bootstrap formValidation 复选框组未添加 has-success

标签 jquery css twitter-bootstrap-3 formvalidation-plugin

成功时,验证器以黑色而不是绿色显示 div。如何让它以绿色显示。 它不会在成功时将 has-success 类添加到 form-group div。

这是 HTML

<form role="form" method="post" class="form-horizontal" id="anyForm"> 
<div class="form-group required">
    <label class="col-sm-4 col-xs-12 control-label">Meeting Days</label>
    <div class="col-sm-6 col-xs-12">
        <div class="row">
            <div class="col-sm-6 col-xs-12">
                <div class="checkbox">
                    <label><input type="checkbox" name="days[]" value="1">Monday</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="days[]" value="2">Tuesday</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="days[]" value="3">Wednesday</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="days[]" value="4">Thursday</label>
                </div>
            </div>
            <div class="col-sm-6 col-xs-12">
                <div class="checkbox">
                    <label><input type="checkbox" name="days[]" value="5">Friday</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="days[]" value="6">Saturday</label>
                </div>
                <div class="checkbox">
                    <label><input type="checkbox" name="days[]" value="7">Sunday</label>
                </div>
            </div>
        </div>
    </div>
</div>

验证

 $('#anyForm').formValidation({
     framework: 'bootstrap',
     icon: {
         valid: 'glyphicon glyphicon-ok',
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
     },
     fields: {
         "days[]" : {
             validators: {
                 notEmpty: {
                     message: 'Required field'
                 }
             }
         }
     }
 });

jsfiddle

最佳答案

通过向 onsuccess 事件添加 has-success 类获得了解决方案。

    $('#anyForm').
 formValidation({
     framework: 'bootstrap',
     icon: {
         valid: 'glyphicon glyphicon-ok',
         invalid: 'glyphicon glyphicon-remove',
         validating: 'glyphicon glyphicon-refresh'
     },
     fields: {
         "days[]" : {
             validators: {
                 notEmpty: {
                     message: 'Required field'
                 }
             }
         }
     }
 }).on('success.field.fv', function (e, data) {
     if (e.target.name == 'days[]') {
         var $parent = data.element.parents('.form-group');
         $parent.addClass('has-success');
     }
 });

Updated JSFIDDLE

关于jquery - bootstrap formValidation 复选框组未添加 has-success,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32883127/

相关文章:

css - 应用背景和后属性时列表出现问题

jquery - Bootstrap 3 Accordion 与 jquery UI Accordion

jquery - Facebook 点赞/分享按钮未显示在 IE 的下拉菜单中

JQuery、Ajax、Handlebars 清除表格然后重新填充

javascript - Materialisecss 框架中行的响应能力

php - jQuery AJAX 错误处理

javascript - 将 Flash 时钟转换为 javascript 和 css 时钟相同的图像

javascript - 如何在响应式设计中水平自动滚动图像

html - 如何在没有水平滚动条的情况下制作 bootstrap 3 流体布局

javascript - 我想知道 jquery 的委托(delegate)或 on(for delegate) 是如何工作的