FormBuilder/FormRenderer validation is not showing the error message when field value is set by code

[PranapSivadasan]

Environment

• Hosting type
  • [x] Form.io
  • [ ] Local deployment
  • Version: Latest version (Even in online demo builder)
• Browser: Firefox
• Browser version: 88.0.1

Steps to Reproduce

1. We have a simple form where the field value of a text component is set by javascript code in its Custom Default Value / Calculated Value.
2. This triggers the validation on the field just fine, so if the validation fails, the form cannot be submitted.
3. But the error message given in the Custom Validation is not showing. It will only show if the user manually updates the field value.

Expected behavior

1. When the text field contains a value which violates the validation an error message must be shown.

Observed behavior

1. When the value that violates the validation is set by javascript code the error message is not showing.
2. But when the user inputs the value in the text field that violates the validation the error message is shown.

Example

1. In the below Form there are 2 fields namely First Name (Select Box - Dropdown) and Last Name (Text Field).
2. When the first name is set, it populates the last name with the code in calculated value.
3. When the last name is 'Pathan' there is an error message that must be shown.

"valid = (input === 'Pathan') ? 'Last name should not be \"Pathan\"': true;"

4. But the error message is not showing unless the user enters the value into the text field

GIF

Form JSON

{
    "components": [
        {
            "label": "First Name",
            "widget": "choicesjs",
            "tableView": true,
            "data": {
                "values": [
                    {
                        "label": "Kevin",
                        "value": "Pietersen"
                    },
                    {
                        "label": "David",
                        "value": "Miller"
                    },
                    {
                        "label": "Irfan",
                        "value": "Pathan"
                    },
                    {
                        "label": "Yusuf",
                        "value": "Pathan"
                    }
                ]
            },
            "selectThreshold": 0.3,
            "validate": {
                "required": true
            },
            "key": "firstName",
            "type": "select",
            "indexeddb": {
                "filter": {}
            },
            "input": true
        },
        {
            "label": "Last Name",
            "tableView": true,
            "redrawOn": "firstName",
            "calculateValue": "value = data.firstName;",
            "validate": {
                "custom": "valid = (input === 'Pathan') ? 'Last name should not be \"Pathan\"': true;"
            },
            "key": "lastName",
            "type": "textfield",
            "input": true
        },
        {
            "type": "button",
            "label": "Submit",
            "key": "submit",
            "disableOnInvalid": true,
            "input": true,
            "tableView": false
        }
    ]
}

[wag110894]

Hello @PranapSivadasan,

Apologies on the delay. We are not able to replicate this using the latest version using our sand box. https://formio.github.io/formio.js/app/sandbox We used your code above and have saved the form as 60d35e4849fe3227df6356d6. Enter the number above to Load Form on the site above to replicate our view.

[PranapSivadasan]

@wag110894

REQUESTING TO REOPEN THE ISSUE

The same issue is shown in the sandbox that you have hosted under the ID - 60d35e4849fe3227df6356d6.

Expected Behavior:

• When the text field contains a value that is set by select component, which violates the validation an error message must be shown every time.

Observed Behavior:

• When the value that violates the validation is set by javascript code the error message is not showing for first time.
• But when the user inputs the value in the text field that violates the validation the error message is shown.
• Once user manually triggers error message it works properly afterwards.

Attachment:

• Attached a GIF below from the sand box.
• In the below GIF, the are 2 indications (Colored Squares).
• The Red square indicates the first time invalid value is set in the textbox using the custom validation js code.
• In that time one can see that submit button is disabled as per expectation, but the error message is not shown.
• The Blue square indicates the user manually entered the invalid value into the text box.
• During that time one can see the error message.
• After the error message is triggered manually for each and every time things work properly.
• To observe the issue once again, refresh the entire browser and check it.

[lane-formio]

We're currently addressing a backlog of GitHub issues, and as part of this effort, some inactive issues may be marked as closed. This isn't a dismissal, but a step toward more efficient tracking.

If you feel the issue is still relevant, please re-open and we'll ensure it gets the attention it deserves. Your understanding is appreciated as we work to enhance our open-source responsiveness.