Question

我使用Bootstrap wysiwyg5编辑器作为表单的一部分。

此文本区域恰好是必填字段（不应为空）。我想验证用户是否在此字段中输入了任何值。我看到Bootstrap wysiwyg使用Iframe来显示内容。我尝试通过这样做来访问jQuery中iframe主体的内容：

$('.textarea.wysihtml5-editor').html()

但失败了。

我的问题是：如何检查用户是否在此Bootstrap wysiwyg textarea中输入了一些文本。请帮帮我。

PS：我看到了this的问题，但它没有用处。

Answer 1

我知道这个问题很老，但也许可以帮助有人找这个......

要使JQuery Validation与WysiHtml5一起使用，只需将插件设置为不忽略隐藏的textareas：

$('#form').validate({
   ignore: ":hidden:not(textarea)",     
   rules: {     
       WysiHtmlField: "required"
   },
   submitHandler: function(form) { ... }
});

Answer 2

您需要侦听模糊事件，然后检查编辑器的editor.textareaElement以获取基础文本区域。

var editor = new wysihtml5.Editor("wysihtml5-editor");

editor.on('blur', function() {
    if( this.textareaElement.value.length === 0 ) { alert('no blank entries!'); }
});

大部分信息都在他们的维基上：https://github.com/xing/wysihtml5/wiki

Answer 3

您正在使用 bootstrap-wysihtml5 ，并且rlemon使用常规非引导主题WYSIHTML5的代码回答您。

您

var editor = new wysihtml5.Editor（“wysihtml5-editor”）;

代码实际上在bootstrap-wysihtml5-0.0.2.js（或者你使用的任何版本）中

然而，这个包装器将编辑器对象定义为window.editor，因此您可以在启动wysihtml5元素之后创建这样的模糊函数。

window.editor.on('blur', function() {
 // do whatever you want to do on blur
});

Answer 4

我想我找到了一个解决方案，通过jquery我们正在为我们的wysihtml5添加nicehide类，现在我们可以验证它，我隐藏它的隐藏可见性，也许你的代码没有它，其他解决方案可以放在iframe类和nicehide到同一个位置......

jQuery('.wysihtml5').wysihtml5({
"events":      {
"load": function () {
jQuery('.wysihtml5').addClass('nicehide');
}
}
});


.nicehide {
resize: none;
display: block !important;
width: 0;
height: 0;
margin: -200px 0 0 0;
float: left;
visibility:hidden;
}

感谢https://github.com/jhollingworth/bootstrap-wysihtml5/issues/275，我只添加了可见性..

Answer 5

html5验证（必需=＆＃34;必需＆＃34;例如）不起作用。发生这种情况是因为隐藏了原始字段。

如果要根据您的问题在bootstrap wysiwyg5编辑器中进行验证，请尝试以下操作：

jQuery('.wysihtml5').wysihtml5({
   "events":      {
       "load": function () {
           jQuery('.wysihtml5').addClass('nicehide');
       }
   }
});

以及css：

.nicehide {
    resize: none;
    display: block !important;
    width: 0;
    height: 0;
    margin: 0 0 0 -15px;
    float: left;
    border: none;
}

希望能帮助你：）

Answer 6

对我来说，这段代码有效。
HTML

<input type='text' name='title' />
<textarea name='content' class="textarea" placeholder="Enter text ..." 
style="width: 100%; height: 200px; font-size: 14px; line-height: 18px;"></textarea>
<span id='after'></span>

CSS

.textnothide {
    display: block !important;
    position: absolute;
    z-index: -1;
}

JS

<script>
  $('.textarea').wysihtml5(
      events: {
        load: function () {
            $('.textarea').addClass('textnothide');
        }
    }
  );
<script>

此代码可防止隐藏文本区域。但是不幸的是，错误消息出现在文本区域之前。这也可以避免。

$(document).on('DOMNodeInserted', function (e) {
    if ($(e.target).hasClass('error-help-block')) {
        var id = $(e.target).attr('id');
        if (id == 'content-error') {
            $(e.target).insertBefore($('.after'));
        }
    }
});

此代码捕获由jquery验证插件创建的错误消息，并将其添加到其他位置。并删除了jquery验证代码，因为不需要。

在Bootstrap wysiwyg编辑器中验证

6 个答案: