Component validation on page loading

[bohdan-venya]

Hello. I user FormIO Modeler and added custom validation to input component. It works fine when I change values on it, but the validation isn't getting triggered on page loading. So If I have some incorrect values that I set beforehand, the validation doesn't work until I change the value. Is there a way to trigger validation on any change on the page/when I just load the form? Thank you I added console.log() to custom validation and actually see that we do validation and return valud=false, but we don't show any validation on UI

[daneformio]

Can you please provide a form json of the form you have configured this in?

[HautonR7]

I have the same problem. Here is my form + the data I provide :

export function PocFormio() {
	const ref = useRef(null);
	useEffect(() => {
		Formio.createForm(document.getElementById('formio'), {
			"display": "form",
			"components": [
				{
					"label": "Text Field",
					"applyMaskOn": "change",
					"validate": {
						"required": true
					},
					"key": "textField",
					"type": "textfield",
					"input": true,
					"tableView": true
				}
			]
		}, { submission: {
			"data": {
			  "textField": ""
			},
			"metadata": {}
		  } })
	}, []);
	
  return (
    <>
      	<div ref={ref} id="formio"/>
    </>
  )
}

but my component is not invalid even though it's required and provided an empty string.

if start to write in the input and then delete it, then the validation works and it's shown as invalid.

[olgabann]

When we initialize the form using:

submission: {
  data: {
    textField: '',     // empty value for a required field
    textField1: 'one'  // value for a non-required field
  }
}

Form.io does load these values, but it does not trigger validation on load. Because of this, the required field (textField) will not show a validation error until the user interacts with the field (types something and deletes it, etc.). This is the default Form.io behavior — validation only runs after user interaction.

However, when we set the submission after the form is fully created:

form.setSubmission({
  data: {
    textField: "",
    textField1: "one"
  }
});

Form.io updates all components correctly and immediately triggers validation, so the required field is marked invalid right away, without waiting for user interaction.

This approach is also the recommended and more reliable way to initialize submission data in Form.io.

jsFiddle example https://jsfiddle.net/Olga_Bannikova/93juthve/15/

https://github.com/user-attachments/assets/dd229c5d-8506-46a4-805e-e1a0d0fd4f31