How to use internal validation with QEditor? Should I be wrapping it in a QField?

[BenJackGill]

I want to use internal validation with the QEditor.

Specifically, when the WYSIWYG editor is empty I want an error to show. For example, this is how internal validation looks on an empty QInput, and I want the same thing on my QEditor:

Currently I am attempting to achieve this by wrapping QEditor in a QField.

This is what my code looks like:

<q-field
  v-model="editorContent"
  :rules="[(val: string) => !!val || 'Please include ticket details.']"
>
  <q-editor
    ref="editorElement"
    v-model="editorContent"
    placeholder="Type your ticket here..."
    min-height="15rem"
    style="width: 100%"
    :toolbar="[
      ['bold', 'italic', 'strike', 'underline'],
      ['unordered', 'ordered'],
      ['link'],
      ['undo', 'redo'],
    ]"
    @paste="handleEditorPaste"
  />
</q-field>

And it almost works.

When the page first loads and I click into the editor and immediately click out of the editor it shows the validation error correctly.

But if I type something, delete that text, and then click out of the editor, no validation error shows. Doing this action should be triggering the same validation error as above because there is no text in the editor, but it does not work.

Any ideas on how to get this working?

P.S. I tried to re-create this in a codepen but it wouldn't handle the :rules="[(val: string) => !!val || 'Please include ticket details.']" correctly. Just showed a blank page when that was included.

[BenJackGill]

Ok I figured out the first problem.

When deleting the content of the editor it was leaving behind an invisible <br> element.

So I removed the <br> using the @update:model-value event like so:

      <q-field
        ref="editorFieldElement"
        v-model="editorContent"
        :rules="[(val: string) => !!val || 'Please include ticket details.']"
      >
        <q-editor
          ref="editorElement"
          v-model="editorContent"
          placeholder="Type your ticket here..."
          min-height="15rem"
          style="width: 100%"
          :toolbar="[
            ['bold', 'italic', 'strike', 'underline'],
            ['unordered', 'ordered'],
            ['link'],
            ['undo', 'redo'],
          ]"
          @paste="handleEditorPaste"
          @update:model-value="handleEditorChange" // <-- Added this here
        />
      </q-field>

const handleEditorChange = (value: string) => {
  if (value === '<br>') {
    editorContent.value = '';
  }
};

But I have another problem with this solution...

When there is an input validation error the exclamation mark appears on top right hand corner, and causing the editor to be pushed in at the side. So I'm wondering if I can move that exclamation mark inside the editor to make it more visually appealing.

Here is a screenshot to explain:

[huynt0911]

Hi @BenJackGill, I am facing the same issue. Have you figured out any workaround for the input validation error in the top right corner?

[BenJackGill]

Sorry I switched away to PrimeVue, not sure about Quasar stuff anymore.

…

On Thu, 5 Sep 2024 at 9:20 AM, Austin Nguyen ***@***.***> wrote: Hi @BenJackGill <https://github.com/BenJackGill>, I am facing the same issue. Have you figured out any workaround for the input validation error in the top right corner? — Reply to this email directly, view it on GitHub <#14085 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAPS26K7M3HK55CPL2COVBTZU65WLAVCNFSM6AAAAABNVPQ65GVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTANJVGIZDCMA> . You are receiving this because you were mentioned.Message ID: ***@***.*** com>