Redactor JS - 使用 BootstrapValidator 验证表单

Question

我有一个 Rails 应用程序，我在其中使用 Redactor 进行富文本输入。表单放置在 Bootstrap 模式中。我想在用户键入时验证（存在），如果该字段为空，则显示验证错误。我在验证部分使用BootstrapValidator。我目前没有收到redactor 文本区域的任何验证消息。

代码的相关部分如下所示：

= form_for idea, remote: remote, html: {role: :form, "data-model" => 'idea', multipart: true}  do |f|

  # This field  / validation works
  .form-group
    = f.label :title, "Title", :class => "required"
    = f.text_field :title, :class => "form-control"

  # This does not
  .form-group
    = f.label :description, :class => "required"
    = f.text_area :description, :class => "form-control big-text-area redactor"

Javascript 看起来像这样：

:javascript

  $('#new_idea').bootstrapValidator({
    message: 'This value is not valid',

    feedbackIcons: {
      valid: 'fa fa-check-square',
      invalid: 'fa fa-warning',
      validating: 'fa fa-circle-o-notch spin'
    },

    fields: {
      "idea[title]": {
        validators: {
          notEmpty: {
            message: 'The title is required'
          }
        }
      },

      "idea[description]": {
        validators: {
          callback: {
            message: 'The idea description is required',
            callback: function(value, validator) {

              # NOTE: This part of the code never get called                 

              var code = $('[name="idea[description]"]').code();
              return (code !== '' && code !== '<p><br></p>');
            }
          }
        }
      }
    }
  })

  $('.redactor').redactor({

    keyupCallback: function (e) {
      validateEditor();
    }
  });

  function validateEditor() {
    $('#new_idea').bootstrapValidator('revalidateField', "idea[description]");
  };

对我可以做些什么来使验证生效有什么想法吗？

Answer 1

我在使用 Redactor 时遇到了类似的情况，所以也许这会有所帮助。就我而言，我在 Redactor 绑定到的 textarea 上有一个更改侦听器（与我认为 Bootstrap Validator 正在做的类似方法），但问题是 Redactor 正在吃 change 事件原始文本区域。为了解决这个问题，我在初始化 Redactor 插件时实现了以下内容。

var $mytextarea = $('selector-for-textarea');
$mytextarea.redactor({
    changeCallback: function( html ) {
        $mytextarea.trigger( 'change' );
    } 
});

希望这会有所帮助，干杯。