summernote jquery validation and swal toast

index.html

<div class="container pt-5">
    <div class="row">
      <div class="col-lg-8">
        <form class="form-validate-summernote">
          <div class="form-group">
            <label>Name</label>
            <input class="form-control" name="form2-name" type="text" required="required" data-msg="Please enter your name"/>
          </div>
          <div class="form-group">
            <label>Text</label>
            <textarea class="summernote" required="required" data-msg="Please write something :)"></textarea>
          </div>
          <div class="form-group">       
            <button class="btn btn-primary" type="submit">Submit</button>
          </div>
        </form>
      </div>
    </div>
  </div>

index.js

// need Jquery Validation and swal

const Toast = Swal.mixin({
	toast: true,
	position: 'top-end',
	showConfirmButton: false,
	timer: 3000,
	timerProgressBar: true,
	didOpen: (toast) => {
	  toast.addEventListener('mouseenter', Swal.stopTimer)
	  toast.addEventListener('mouseleave', Swal.resumeTimer)
	}
  })

$(function () {

    /* Summernote Validation */

    var summernoteForm = $('.form-validate-summernote');
    var summernoteElement = $('.summernote');

    var summernoteValidator = summernoteForm.validate({
        errorElement: "div",
        errorClass: 'is-invalid',
        validClass: 'is-valid',
        ignore: ':hidden:not(.summernote),.note-editable.card-block',
        errorPlacement: function (error, element) {
            // Add the `help-block` class to the error element
            error.addClass("invalid-feedback");
            console.log(element);
            if (element.prop("type") === "checkbox") {
                error.insertAfter(element.siblings("label"));
            } else if (element.hasClass("summernote")) {
				error.insertAfter(element.siblings(".note-editor"));
				element.parent().addClass('bg-danger');
            } else {
                error.insertAfter(element);
            }
        }
    });

    summernoteElement.summernote({
        height: 300,
        callbacks: {
            onChange: function (contents, $editable) {
                // Note that at this point, the value of the `textarea` is not the same as the one
                // you entered into the summernote editor, so you have to set it yourself to make
                // the validation consistent and in sync with the value.
				summernoteElement.val(summernoteElement.summernote('isEmpty') ? "" : contents);
				if(summernoteElement.summernote('isEmpty')){
					summernoteElement.parent().addClass('bg-danger');
					Toast.fire({
						icon: 'error',
						title: 'Harap isi about post.'
					})
				} else {
					summernoteElement.parent().removeClass('bg-danger');
				}

                // You should re-validate your element after change, because the plugin will have
                // no way to know that the value of your `textarea` has been changed if the change
                // was done programmatically.
                summernoteValidator.element(summernoteElement);
            }
        }
    });
  });