onChange-behaviour & validation in a simple example
I just started using JSON-Forms 3.2.1 (vue-vanilla) and Vue 3.4.15 and “<script setup>”. Beside other topics I was looking at the event-handling while using the form (type in / change form content) and handling of errors and experienced a behaviour I don’t understand. It might be this is by design and I need to take care of something I’m not aware of but for me it’s hard to distinguish this right now.
I compiled this sample for you:
Script-code that feeds…
<script setup lang="ts">
import { JsonForms } from '@jsonforms/vue'
import type { JsonFormsChangeEvent } from '@jsonforms/vue'
import { vanillaRenderers } from '@jsonforms/vue-vanilla'
const schema = JSON.parse(`{
"properties": {
"i_lastname": {
"title": "Lastname",
"type": "string",
"default": "Mustermann",
"minLength": 3
}
}
}`)
const uischema = JSON.parse(`{
"type": "HorizontalLayout",
"elements": [
{
"type": "VerticalLayout",
"elements": [
{
"type": "Control",
"scope": "#/properties/i_lastname"
}
]
}
]
}`)
let data = {
i_lastname: ''
}
const renderers = Object.freeze([
...vanillaRenderers
])
function onChange(event: JsonFormsChangeEvent) {
data = event.data
console.log('onChange -> event: ', event)
}
</script>
…the template:
<template>
<div>
<h1>JSON-Forms with Vue 3.4 and "<script setup>"</h1>
</div>
<div class="myform">
<form method="post" enctype="multipart/form-data">
<json-forms
:data="data"
:renderers="renderers"
:schema="schema"
:uischema="uischema"
@change="onChange"
/>
</form>
</div>
</template>
Questions:
-
When I load the “page” there’s already the onChange() event fired and the naturally empty form is validated. This of course results in the error-message “must NOT have fewer than 3 characters”. When thinking about form&user-interaction there was no change so far. Is this something I need to handle myself because it is by design? As long as I programmed form-validations myself I used events on form-field-level like “onkeyup” to trigger validations which makes much sense looking at what a user actually does using the form. Could or should I get into how/when JSON Forms triggers the validation to change the trigger or is there simply something I get wrong?
The data the event contains looks fine, see the screenshot in the bottom. -
So I enter letters to the field and as the string-component loses the focus the validation runs and the error disappears. Again: Requiring to lose the focus seems inappropriate.
Again: The data the event contains looks fine, see screenshot see the screenshot in the bottom. -
Now I return to the text input and empty it, i.e. I delete the content and leave it. Result: The event.data-object is empty, no “event.data.i_lastname”-attribute anymore and especially NO error. How that?
Before I post the console-output to demonstrate the steps above I’d like to kindly ask you to give me some advice.
Regards,
Ruediger.
