ckeditor issue : need to click twice on submit button for submitting form

Question

this is my validation code, when ckeditor is empty it's get error but when fill up ckeditor textarea have to click twice on submit button to submit form.

$('#form').validate({
            ignore: [],
            rules: {
                title: {
                    required: true
                },
                description: {
                    required: true
                }
            },
            messages: {
                title: {
                    required: 'The title field is required.'
                },
                description: {
                    required: 'The description field is required.'
                }
            },
            submitHandler: function(form, event) {
                event.preventDefault();
                CKEDITOR.instances.description.updateElement();
                form.submit();
            }
        });

Answer 1

I had the same problem but finally I was able to solve it. Here is the way around. On first click, the form did not get the data from ckeditor field but it receives upon the second submission of the form.I created the code below. check the comments for explanation

<script>
let editor;
$(function () {
//replace textField with the Id of your ckeditor field
    ClassicEditor
        .create( document.querySelector( '#textField' ) ,{
            placeholder: 'type in your placeholder here',
        }).then(newEditor=>{
            editor = newEditor;
        })
        .catch( error => {
            console.error( error );
        } );
  });
//then get the value of the field on form submit 
document.querySelector("#yourFormId").addEventListener("submit",(e)=>{
e.preventDefault();
const ckeditorData = editor.getData();
alert(ckeditorData)
//this makes sure you are going to get the data when you click on 
//the submit button on the first time
})
</script>