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.

Silva

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) { ... }
});

Massive

Wow That's great – Numerary

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

Submissive

am sorry this does not work! first line is not working : var editor = new wysihtml5.Editor("wysihtml5-editor");-does not work! where as $(".textarea").wysihtml5();-works – Silva

dude, the core of the sample is what you need. I included the above line to show you that you need to collect the editor object. o_O – Submissive

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

Ningsia

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..

Rebellion

Answer 5

html5 validation (required="required" for example) don't work. this happens because the original field is hidden.

In case for validation in bootstrap wysiwyg5 editor based on your question, try this:

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

and it's for the css:

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

Hope that helps you :)

Heathendom

Answer 6

For me this code worked.
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>

This code prevents hiding the textarea. But unfortunately error message appears before text area. This can also be prevented.

$(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'));
        }
    }
});

This code captures the error message created by jquery validation plugin and add it to a different place. And removed jquery validation code since not needed.

Sulfur