ckeditor | the "required" attribute within <textarea> tag is not working

Question

When using CKEDITOR with <textarea> tag, it's not working.

 <textarea id="editor1" name="description" class="form-control" cols="10" rows="10" required></textarea>

 <script>
      CKEDITOR.replace('editor1');
 </script>

Any sugesstions?

Denesedengue

Answer 1

Please see: https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_editor.html#event-required

You need to assign an event handler to CKEditor which "replaces" native textarea element.

---

If you are looking for more fancy way of showing messages than standard alert dialogs, please try using notifications. Below is the most basic example (when you press submit button while having empty editor, notification will be displayed):

var editor = CKEDITOR.replace( 'editor1', {
    language: 'en',
    extraPlugins: 'notification'
});

editor.on( 'required', function( evt ) {
    editor.showNotification( 'This field is required.', 'warning' );
    evt.cancel();
} );

Please note that contrary to what is written in documentation the notification plugin seems to be included into every preset. You can check it by using search box of Available Plugins, list box in online builder.

Alena

Can i get the native HTML validation (tooltip one), as this would be confusing (tooltip and alert within same form). – Denesedengue

I don't think you will show two messages because when CKEditor replaces the textarea it in fact set it to display:none so no tooltip validation will be fired here. If however you don't want to use alerts, you can try using notifications. Let me update my answer. – Alena

Answer 2

You can use

<script>
function validate() {
    var resultado_validacion=true;
    $("#editor_error").html("");
    var editor_val = CKEDITOR.instances.editor.document.getBody().getChild(0).getText().trim();
    if(!(editor_val.length>0)){
        $("#editor_error").html("Se requiere contenido del oficio");
        resultado_validacion=false;
    }       

    return resultado_validacion;
}

</script>    
<form  onSubmit="return validate();">

Ayakoayala