CODEWITHSUNDEEP
validationckeditortextarearequired
CairoCoder
CairoCoder

Reputation: 3189

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

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?

Upvotes: 6

Views: 15955

Answers (2)

Doberon
Doberon

Reputation: 648

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();">

Upvotes: 0

j.swiderski
j.swiderski

Reputation: 2445

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.

Upvotes: 6

Related Questions