Search code examples
phpjqueryformsckeditorckeditor5

How to validate required for ckeditor5 textarea fields?


After linking the script directory to "ckeditor5", I have text-area as follow :

<textarea rows="10" name="sample_identity" id="sample_identity" Placeholder="Sample Identification" data-parsley-required="true"></textarea>

And, this creates the ckeditor replacing the textarea.

<script>ClassicEditor.create( document.querySelector( '#sample_identity' ) )</script>

Now, how do I make this "sample_identity" instance of ckeditor required on form submit.

I tried using the class for the ckeditor instance which is-

.ck-focused for onfocus and .ck-blurred on outfocus.

But, I have 3-4 textareas on the same form which has ckeditor replacing them. So, this'll not work.

I know ckeditor5 is a betaversion an hasn't been used yet, but, any help on this would be appreciated.

Thank you.


Solution

  • You need to handle this manually for now. Especially that you use Parsley which I guess will be confused by CKEditor hiding the original <textarea> (CKEditor only uses it as a data source and then hides it to insert its own container).

    By default, CKEditor updates the <textarea>'s value on form's submit. This means that when someone presses a submit button in this form, that callback will cause the current editor's data to be sent to the server with the rest of the form.

    However, this might not work with native validation (I haven't checked it) and has little chance to work with some custom validation frameworks.

    Which means that you'll need to handle validation manually. This means that you need to listen to e.g. submit event on the form, get editor's data, check if it's ok. If yes, just do nothing. If not, prevent the default action of the event and display some info to the user.

    That's just one of the options, of course. You'll need to figure out the right solution for your case yourself.