Validation after form submission - how to do conditional formatting of input field?

Hi developers and community users!

I want to make a borders with red colour in the input field when validation error occurs. But I need the red colour of the borders to appear only after clicking the submit button (actual after form submitting). I have set the Validation setting in the form - after form submission

The workflow runs correctly (i.e. if there is a validation error, the process aborts with an error).

However, I don’t know how to “colour” the borders in the field design settings? That is, what condition should I specify so that the field frame is initially the primary colour, and once the process is executed with an error - in a different colour? I made a new custom state with a formula. But the current validity states already have the value “false”, so the condition is automatically executed immediately (the red borders is visible initially). But I need it to be executed only after form submission (attempts to submit the form).

How can I do this? Is there any correct and logical way? I have an idea right now to create another boolean variable specifically for validity (like “isValidField”), where to write the value “false” in the workflow when an error occurs… And then combine the condition in the formula for the custom condition. But I’m not sure if this is the right solution.

Hi @alcompstudio ,

there are several ways to do it.

I’d create a variable with “array” data type and store inside it the validation states of all inputs to be checked.

For example, let’s call such array variable “validationVar” and set its default value to:

[
{“input_Id”: 1, is_valid: null},
{“input_Id”: 2, is_valid: null},
{“input_Id”: 3, is_valid: null},
{“input_Id”: 4, is_valid: null},
]

Then, you bind the red border state to the proper object element inside the array. So, the red border appear if “validationVar[…].isValid = false”

Then, “on form validation” event workflow you just create “change variable value” actions, which assigns a validation state to an object .

  • If input with id = 1 is valid, the “validationVar[0].is_valid” value is assigned to true.
  • If its not valid, the “validationVar[0].is_valid” value is assigned to false. And you get red border.

And it’s all happening only on “form submit” event.

And because you have this “validation array” you can easily manipulate with data. Like, filter out all invalid inputs by key value.

NB!: You can also create separate “validation variables” with boolean data type for all inputs. It’s up to you.

I’m not sure if this is the most elegant solution, but it definitely work :slight_smile:
Maybe someone will propose a less effort way.

2 Likes

@Batik_Okazov , thanks for your detailed reply! That’s pretty much what I assumed, that I should use an additional variable, but you suggested that I could use a data array as a variable, it would certainly be a bit better than creating separate variables for each check. But I thought there was a solution that didn’t involve using “external” variables as an additional option. I assumed that I was doing something wrong, or missing something in the formula… But if there is no “inbuilt” solution to my question, then of course I will have to use variables. Again, thank you for your helpful hint!