How to implement validation on specific input form fields (mandatory, regex) and keep the button disabled until all the validations are successful?
To keep the button disabled in the vFlow form, until all the input fields validations are successful, you just have to make the fields mandatory , or enter the regex on the fields and have to configure a footer with some basic configurations.
When you configure a footer for Submit button you have to mark this checkbox (is Validation Required) in the configurations of Submit Button.
After you enable this checkbox, the Submit button will automatically check all the mandatory fields are filled or not, and if all the validations are true and all the fields are valid then your submit button is enabled ,else it will be in Disable form.
27 Likes
For reference I am sharing some screenshots as well -
When I have not entered date in the input field and field is mandatory then our submit button is disabled.
and Once I enter the date in field and it validates then the button automatically enables.
26 Likes
Is it also feasible to show a red text mentioning the reason of the field showing as highlighted in red?
5 Likes
Yes, It is possible.
We have to configure the validation message for this in vFlow.
26 Likes
We can configure the validation message on the following validations -
-
Regex Match
-
Mandatory
-
Min Value
-
Max Value
-
Min Length
-
Max Length
If any of the validations becomes false we can show the individual error messages for these validations.
Here I have putted a error message on Regex, if the regex is false we will get error message.
25 Likes