Как прикрутить jQuery Validate к textarea, являющуюся CKEditor 5?

Question

Имеется следующий код для формы, отправляющей e-mail:

$(document).ready(function () {
  const form = $('.form-block__email-form');
  const emailTextarea = $('.form__text');
  let emailTextEditor;

  ClassicEditor
    .create(document.querySelector( '#emailText'))
    .then(editor => {
      emailTextEditor = editor;
    } )
    .catch(error => {
      console.error(error);
    });

  form.validate({
    rules: {
      emailRecipients: {
        required: true,
        email: true
      },
      emailText: {
        
      }
    },
    messages: {
      emailRecipients: {
        required: "Пожалуйста, введите e-mail",
        email: "Пожалуйста, введите e-mail в корректном формате"
      },
      emailText: {
        required: "Пожалуйста, введите текст письма"
      }
    }
  });
});

html {
  box-sizing: border-box; }

*,
*::before,
*::after {
  box-sizing: inherit; }

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 100vh;
  color: #000;
  font-size: 16px;
  font-family: 'Roboto Regular', sans-serif;
  line-height: 1.5;
  background-color: #fff; }

a {
  text-decoration: none;
  color: inherit; }

.form-control.error {
  border-color: #ff0000; }
  .form-control.error:focus {
    border-color: #ff0000; }

.form-control:focus {
  border-color: #4169e1;
  box-shadow: none; }

label.error {
  color: #ff0000;
  font-size: 0.75rem; }

.header {
  color: #eeeeee;
  background: #002366; }
  .header__navbar {
    padding: 1.25rem; }
  .header__logo {
    display: inline-flex;
    align-items: center;
    font-size: 1.5rem;
    font-family: 'Segoe UI', sans-serif; }
    .header__logo:hover, .header__logo:focus {
      color: inherit;
      text-decoration: none; }
    .header__logo .logo__icon {
      margin-right: .625rem; }

.form-block {
  padding: 4rem 0; }

.ck.ck-editor__main > .ck-editor__editable {
  min-height: 18.75rem; }
  .ck.ck-editor__main > .ck-editor__editable:not(.ck-editor__nested-editable).ck-focused {
    border-color: #4169e1;
    box-shadow: none; }

.footer {
  padding: 2rem 0;
  color: #eee;
  background: #002366; }
  .footer__text {
    margin: 0; }
  .footer__link {
    display: inline-block; }
    .footer__link::after {
      content: '';
      display: block;
      width: 100%;
      background-color: #eee;
      height: 1px;
      transform: scale(0);
      transition: all .3s; }
    .footer__link:hover, .footer__link:focus {
      color: inherit;
      text-decoration: none; }
      .footer__link:hover::after, .footer__link:focus::after {
        transform: scale(1); }

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Email Form</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
    <nav class="header__navbar navbar">
        <a class="header__logo" href="#">
            <i class="logo__icon fa fa-envelope-o" aria-hidden="true"></i>
            Email Form
        </a>
    </nav>
</header>

<main class="main d-flex flex-column flex-grow-1">
    <section class="form-block">
        <div class="container">
            <form class="form-block__email-form" action="" enctype="multipart/form-data" method="post">
                <div class="form-group">
                    <label for="emailRecipients">Кому</label>
                    <input type="email"
                           class="form-control"
                           id="emailRecipients"
                           name="emailRecipients"
                           placeholder="Введите адрес или несколько адресов через запятую/точку с запятой"
                           multiple
                    >
                    <div class="valid-feedback">Looks good!</div>
                </div>
                <div class="form-group">
                    <label for="emailSubject">Тема письма</label>
                    <input type="text"
                           class="form-control"
                           id="emailSubject"
                           name="emailSubject"
                           placeholder="Введите тему письма"
                    >
                    <div class="valid-feedback">Looks good!</div>
                </div>
                <div class="form-group">
                    <label for="emailText">Текст письма</label>
                    <textarea class="form__text form-control"
                              id="emailText"
                              placeholder="Введите текст письма"
                              name="emailText"
                    ></textarea>
                    <div class="invalid-feedback">Please choose a username.</div>
                </div>
                <button type="submit" class="btn btn-success">Отправить</button>
            </form>
        </div>
    </section>
</main>

<script src="https://cdn.ckeditor.com/ckeditor5/18.0.0/classic/ckeditor.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.validate.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="js/index.js"></script>

</body>
</html>

К полям ввода e-mail и текста письма решил прикрутить валидацию с помощью jQuery Validate. Однако неясно, как прикрутить валидацию к полю ввода текста письма, если учесть, что оно является CKEditor'ом. Попробовал сделать по образцу первого ответа на этот вопрос (только с заменой CKEDITOR.instances.editor1.updateElement() на emailTextEditor.updateSourceElement()), но это не сработало. Как добавить правило required к указанному полю ввода?

БЛОГ НА HUSL

Как прикрутить jQuery Validate к textarea, являющуюся CKEditor 5?

Ответы (0 шт):