How to make CKEditor5 Required

Question

I would like to make a CKEditor5 textarea field required. In addition, I would like to set a trigger with Javascript, so that if a checkbox is checked, then the CKEditor5 field becomes required. Otherwise, when the checkbox is unchecked the CKEditor field is not required.

In the first sample I tried to make the CKEditor field required by adding the required attribute to the tag. However, once CKEditor5 hides the HTML field and replaces it with the CKEditor5 field, the required attribute is ignored.

Making the CKEditor field required. It did not work.

<textarea name="other" id="other" required></textarea>
<script>
   ClassicEditor
      .create( document.querySelector( '#other' ), {
         toolbar: <% $cke_buttons %>,
         placeholder: 'Type here if you have an other reason.'
      } )
      .then( editor => {
         console.log( 'Editor was initialized', editor );
      } )
      .catch( error => {
         console.error( error );
      } );
</script>


<%init>
my $cke_buttons = "[ 'undo', 'redo',
                     '|', 'heading', 'fontfamily', 'fontsize', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript',
                     '|', 'SpecialCharacters', 'fontColor', 'removeFormat',
                     '|', 'alignment', 'blockquote', 'numberedList', 'bulletedList', 'link', 'inserttable' ]"\;
</%init>

In the second sample I tried to make the CKEditor field required by clicking on the Other Reason checkbox. This included Javascript. It does not make the field required and allows the submit button to submit the form data without data in the CKEditor5 field.

Making the CKEditor5 field required when a checkbox is checked.

**HTML**
<input type="checkbox" name="reason" id="reason1" value="Not Interested" aria-label="Not Interested"> Not Interested<br />
<input type="checkbox" name="reason" id="reason2" value="Later" aria-label="Later"> Later<br />
<input type="checkbox" name="reason" id="reason3" value="OtherReason" aria-label="Oher reason"> Other reason<br />

<label for="other">Enter reason if "Other reason" is checked.</label>
<textarea name="other" id="other"></textarea>
<script>
  ClassicEditor
      .create( document.querySelector( '#other' ), {
         toolbar: <% $cke_buttons %>,
      } )
      .then( editor => {
         console.log( 'Editor was initialized', editor );
      } )
      .catch( error => {
         console.error( error );
      } );
</script>

**PERL CODE**
<%init>
my $cke_buttons = "[ 'undo', 'redo',
                     '|', 'heading', 'fontfamily', 'fontsize', 'bold', 'italic', 'underline', 'strikethrough', 'superscript', 'subscript',
                     '|', 'SpecialCharacters', 'fontColor', 'removeFormat',
                     '|', 'alignment', 'blockquote', 'numberedList', 'bulletedList', 'link', 'inserttable' ]"\;
</%init>

**Javascript**
$(document).ready(function() {
   $('#reason3').click(function() {
      if ($(this).is(':checked')) {
          $('#other').removeAttr('required');
          $('#other').focus();
      } else {
          $('#other').attr('required', 'True');
      }
   });
});