Question

使用

bootstrap3-wysihtml5-bower 2013-11-22（WYSIWYG Editor）

和

BootstrapValidator v0.5.2

使用bootstrap验证验证textarea（bootstrap-wysihtml5编辑器）。只需要检查 NotEmpty 和最大字符，然后提交表单。

到目前为止尝试了

＆＃13;

$('#setpolicyform').bootstrapValidator({
  message: 'This value is not valid',
  feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
  },
  ignore: ":hidden:not(textarea)",
  fields: {
    policyta: {
      group: '.lnbrd',
      validators: {
        notEmpty: {
          message: 'Textarea cannot be empty'
        }
      }
    }
  }
}).on('success.form.bv', function(e) {
  e.preventDefault();
  var $form = $("#setpolicyform"),
    $url = $form.attr('action');
  $.post($url, $form.serialize()).done(function(dte) {
    $("#policy-content").html(dte);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" method="POST" action="self.php" name="setpolicyform" id="setpolicyform">
  <div class='box-body pad'>
    <div class="form-group">
      <div class="lnbrd">
        <textarea class="form-control textarea" name="policyta" placeholder="Place some text here" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;"></textarea>
      </div>
    </div>
  </div>
  <div class="box-footer clearfix">
    <button type="submit" class="btn btn-danger pull-right" id="setpolicyformsubmitbtn"><i class="fa fa-save"></i>&nbsp;SAVE</button>
  </div>
</form>

＆＃13;

JSFiddle https://jsfiddle.net/v6s0726L/1/

Answer 1

Folks，bootstrapValidator已升级为formValidation。如果您使用的是formValidation的更新版本，则可以执行此操作，而不是添加单独的类来隐藏文本区域：

   $('#setpolicyform').formValidation({
                                framework: 'bootstrap',
                                excluded: [':disabled'], /* This will do the trick of validating for notEmpty*/
                                icon : {
                                    valid : '',
                                    invalid : '',
                                    validating : 'glyphicon glyphicon-refresh'
                                },
                                fields: {
                                 policyta: {
                                  group: '.lnbrd',
                                  validators: {
                                   notEmpty: {
                                   message: 'Textarea cannot be empty'
                                   },
                                   stringLength: {
                                    max: 50,
                                   message: 'Maximum 50 Characters Required'
                               }
                            }
                         }
                      }
        });

$('.textarea').wysihtml5({
        events: {
            change: function () {
                $('#setpolicyform').formValidation('revalidateField', 'policyta');
        }
    }
});

由于

Answer 2

有一种方法可以验证WYSIWYG Editor，原因bootstrapValidator未对其进行验证，因为在textarea WYSIWYG Editor上初始化name="policyta"后，它将被{{隐藏并忽略1}}

因此，一种方法是不隐藏bootstrapValidator，只需设置textarea，它就会落后z-index: -1，使用WYSIWYG Editor event {{ 1}}在初始化后添加CSS，

CSS

WYSIWYG Editor

JS

load

现在让我们使用.textnothide { display: block !important; position: absolute; z-index: -1; }验证textarea，您还要求$('.textarea').wysihtml5({ events: { load: function () { $('.textarea').addClass('textnothide'); } } });限制

第一个bootstrapValidator脚本

Max Characters

现在让我们使用bootstrapValidator检查并验证textarea，需要另一个$('#setpolicyform').bootstrapValidator({ message: 'This value is not valid', //ignore: ":hidden:not(textarea)", //<---- No Need of This feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { policyta: { group: '.lnbrd', validators: { notEmpty: { message: 'Textarea cannot be empty' }, stringLength: { //<- Limit Maximum Character(s) max: 50, message: 'Maximum 50 Characters Required' } } } } });事件bootstrapValidator来检查更改并重新验证

wysihtml5

所以最终脚本将是

change

Fiddle Working Example

如何使用bootstrap验证验证wysiwyg编辑器

2 个答案: