formio
Custom validation not working if muti-select component has no options selected [BUG]
I'm using Select component which allows multiple values to be selected by the user.
Though Formio has required error message display as an inbuilt functionality, I've used custom validation to display the required error message based on some parameters and also to avoid asterisk symbol near the label. The error message got correctly displayed if I have used inbuilt functionality, but the validation is not getting triggered if the select component has no options selected and its correctly working if any of the options got selected.
The custom validation is correctly working and my required error message got correctly displayed if the same select component does not allowed multiple values.
@travist @randallknutson
Originally posted by @RajamArunachalam in https://github.com/formio/formio.js/discussions/4646
Helllo @RajamArunachalam, can you please provide an example of this issue occurring? Also, can you provide which version of Formio.js that you are using?
Looking forward to your response.
@wag110894, Thanks for your reply!!
Frontend Framework: ANGULAR 10
Formio version: From 4.13.2 To 4.14.2
Environment: Localhost
Scenario : 1
In this scenario, I have used a select component in the form which allows only one value to be selected by the user. I have used custom validation to display required error message for this select component. The condition that I have used to display required error message is: if the user click submit button without selecting any values on select component, the required error message should be displayed. If the condition gets satisfied, the error message is getting displayed on my form, therefore no issues.
I have used the following code for the scenario:
{"formName":"sample","formSchema":{"components":[{"label":"Select","widget":"choicesjs","tableView":true,"data":{"values":[{"label":"option 1","value":"option 1"},{"label":"option 2","value":"option 2"}]},"validate":{"onlyAvailableItems":true,"custom":"valid = !input && data.submit ? \"Select atleast one value\" : true;\nconsole.log('inside validation', input);"},"key":"select","type":"select","input":true},{"label":"Text Field","tableView":true,"validate":{"custom":"valid = data.submit && !input ? \"Enter the Text\" : true;"},"key":"textField","type":"textfield","input":true},{"label":"Submit","showValidations":false,"disableOnInvalid":true,"tableView":false,"key":"submit","type":"button","saveOnEnter":false,"input":true}]}}
Scenario: 2
In this scenario, I have used a select component in the form which allows multiple values to be selected by the user. I have used the condition as same as Scenario: 1. Here I've added an console in the custom validation of select component, so whenever the validation part gets executed, the console also gets executed. But I've noticed one strange thing, If none of the options got selected on multi-select component, then the validation part never gets executed. The validation part is getting executed if at least one option got selected by the user.
I have used the following code for the scenario:
{"formName":"sample","formSchema":{"components":[{"label":"Select","widget":"choicesjs","tableView":true,"multiple":true,"data":{"values":[{"label":"option 1","value":"option 1"},{"label":"option 2","value":"option 2"}]},"validate":{"onlyAvailableItems":true,"custom":"valid = !input && data.submit ? \"Select atleast one value\" : true;\nconsole.log('inside validation', input);"},"key":"select","type":"select","input":true},{"label":"Text Field","tableView":true,"validate":{"custom":"valid = data.submit && !input ? \"Enter the Text\" : true;"},"key":"textField","type":"textfield","input":true},{"label":"Submit","showValidations":false,"disableOnInvalid":true,"tableView":false,"key":"submit","type":"button","saveOnEnter":false,"input":true}]}}
@travist @randallknutson
I am noticing the same issue. Everything works great if the multiple values option is not selected, but when multiple values are selected, and no value is set, the custom validation logic is not firing.
Closing this thread as it is outdated. Please re-open if it is still relevant. Thank you for your contribution
