Validation in Bootstrap wysiwyg5 editor

Question

I am using Bootstrap wysiwyg5 editor as a part of a form.

This text area happens to be a required field(should not be empty). I want to validate if the user has entered any value on to this field or not. I see that Bootstrap wysiwyg uses a Iframe to display the content. I tried to access the content of the iframe's body in jQuery by doing this:

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

but failed.

My question is: How do I check if the user has entered some text in this Bootstrap wysiwyg textarea. Please help me out.

PS: I saw this question, but it was not very helpful.

Answer 1

I know the question is old, but maybe help somebody looking for this..

To make the JQuery Validation work with WysiHtml5, just set the plugin to not ignore hidden textareas:

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

Answer 2

you need to listen for the blur event then check the editor.textareaElement of the editor to get the underlying textarea.

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

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

Most of this info is on their wiki: https://github.com/xing/wysihtml5/wiki

Answer 3

you are using bootstrap-wysihtml5 and rlemon answered you with the code for the regular non bootstrap-themed WYSIHTML5.

your

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

code is actually inside bootstrap-wysihtml5-0.0.2.js (or whatever version you used)

however this wrapper defines the editor object as window.editor so you can create your blur function like this , after you initiate you wysihtml5 element.

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

Answer 4

I think I found a solution, by jquery we are adding nicehide class to our wysihtml5, now we can validate it, I hide it with visibility hidden, maybe ur code could without it, other solution could be put iframe class and nicehide to same position...

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;
}

Thanks to https://github.com/jhollingworth/bootstrap-wysihtml5/issues/275 , I only added visibility..