Vuetify QuillEditor Validation
<script>
import { ref } from 'vue'
import { QuillEditor } from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
const form = ref()
const items = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
]
const title = ref('')
const description = ref('') // will contain HTML
const url = ref('')
const imageFile = ref(null)
const nameRules = ref([
(v: string) => !!v || 'Name is required',
(v: string) => (v && v.length <= 10) || 'Name must be 10 characters or less',
])
const urlRules = ref([
(v: string) => !!v || 'URL is required',
(v: string) => (v && v.length <= 10) || 'URL must be 10 characters or less',
])
const imageRules = ref([
(v: File) => !!v || 'Image is required',
(v: File) => v && v.size <= 1024 * 1024 || 'Image must be less than 1 MB',
])
const select = ref(null)
const checkbox = ref(false)
async function validate () {
const { valid } = await form.value.validate()
if (valid) alert('Form is valid')
}
function reset () {
form.value.reset()
}
function resetValidation () {
form.value.resetValidation()
}
</script>Validate
Reset Form
Reset Validation
not working quilloeditor
1. **Bind `v-model` properly** (you’re doing it right).
2. **Ensure form validation plays well** (Quill isn’t natively supported by Vuetify’s form validation).
3. **Manually validate QuillEditor field**.
—
### 🔧 Fix & Improvements
Here’s how you can integrate QuillEditor properly with Vuetify 3:
—
### ✅ Update `v-form` and manually validate Quill
#### **Add a computed rule for `description`**
const descriptionRules = ref([
(v: string) => !!v || 'Description is required',
])#### **Add a validation helper method**
function isValidDescription () {
return description.value.trim().length > 0
}#### **Update your `validate()` function**
async function validate () {
const { valid } = await form.value.validate()
const descriptionValid = isValidDescription()
if (!descriptionValid) {
alert('Description is required')
return
}
if (valid && descriptionValid) {
alert('Form is valid')
}
}—
### ✅ Update Template: Show validation error manually
Vuetify doesn't know about Quill, so show the error manually below it.
<!-- Rich Text Editor -->
<QuillEditor
v-model:content="description"
content-type="html"
theme="snow"
style="min-height: 180px; background: white;"
/>
<!-- Manual Validation Message -->
<span v-if="!isValidDescription()" class="text-red text-caption">Description is required</span>—
### Final Notes
– Vuetify 3 doesn’t automatically validate third-party editors.
– You must **manually check validity** and show feedback.
– Use a `computed` or method to centralize the validation logic.
—
Let me know if you want this field to also be **resettable or cleared** with the rest of the form!