Input Validations

Dear UI Bakery Team,

You guys are doing such an amazing work. I’m so thankful that you exist!

I wanted to implement client-side validation on my front-end app but I don’t seem to find a way to make the input field “required” even. Is it not yet implemented or am I overlooking something?

Thanks!

Best regards,
isfand

1 Like

Hello @isfand!

For example, you have a form:
image

  1. You need to create a variable in the “error” state. If this variable is “true”, a red sign should appear.
    image

  2. For instance, you need to check the form when pressing the button.

  3. We created a special action that changes the “error variable” depending on whether there’s something in the input or not (don’t forget to set “false” if the input contains something).

  4. There’s a step “Execute action - validate input” and an error check in the action linked to the button. If there’s no error, you can send the data to the server:

That may seem a bit tough from the first sight, sorry :slight_smile:

1 Like

Hi @isfand! Thank you for such kind words! :heart_eyes:

Hi and thank you so much for promptly replying to my query with an elaborated example :slight_smile: I have understood how to do it now.

Can you please also instruct on how to store a value in a state variable in the code? (If there is a need for creating a new thread, let me know)

Thanks a lot!

Hi @isfand! Yes, we can start a new thread.
Just to clarify, do you want to get some data and put it inside a variable? And then you want to use this variable in the code step?

I’m actually trying to store an error message in the state variable that I created. Then I use this state variable in the “data condition” property of my input element (like explained above in ev_jennie’s answer). Hope it’s clear.

And this is where I’m trying to use it.

Variable Assignment

Thank you for your clarifications!
We will rewrite your code snippet a little:

  1. use a code step
    var errorFound = false;
    var errors = {};
    if (!username) {
    errors.username_error = ‘…’;
    errorFound = true;
    }
    if (!password) {
    errors.password_error = ‘…’;
    errorFound = true;
    }
    return errorFound ? errors : errorFound;

  2. create the following step: Save to App State
    set a name for variable - username_error; type - string; value - {{data}} ? {{data.username_error}} : ’ ’

  3. the next step is again to Save to App State
    set a name for variable - password_error; type - string; {{data-}} ? {{data.password_error}} : ’ ’

And create 2 inputs for email and password; button; text (to display error) in UI Builder.
Here is a video regarding UI components ( but in my example, I used only one input for email).

1 Like

Thank you for replying back in such detail (a video? are you crazy? XD thanks!!!)

From seeing the code that you posted, in the step 2 and 3, {{data}} is the variable where response of an HTTP request is stored, right? It can work for server-side validations. But I am trying to implement client-side validation here (before the HTTP request is initiated). Please correct me if I understood this code wrong.

So the main question is that how can I set (and unset) a state variable within my Code Step? Because that’s how I can store an error message (a string value hard-coded in code in my Code Step) into a state variable.

Thanks!

hi @isfand!
Sorry for making you wait.
No, my previous suggestion was about client-side validation.
Let’s start from the beginning
Open the builder tool and add input, text, and button. I’ve put these components into a card.


Select the input, open its’ data settings, set a name for the input as “username”

Now we need to create a logic, open Data Tool and create an action. I called this action “help_for_isfand”.

This action consists of 4 steps, the first one is a code step

Here is the code:
var errorFound = false;
var errors = {};
if (!{{ui.username.value}}) {
errors.username_error = ‘Name is required’;
errorFound = true;
}

return errorFound ? errors : errorFound;

The following step is to save our data to App State.


and create a variable as per attached image

Now we set a condition

In case our input has some data we will post this data to the server via HTTP request, otherwise - display alert or just return data.

Now go back to the builder, set the action “help_for_isfand” on the button on click

The last thing is to call our variable in the text component

and set a condition in the data settings of the text component

And click on preview to see the result
I hope this helps :innocent:

1 Like

Hello @ArtemRomanovsky!

Thank you so much for explaining this in such detail!

I have successfully implemented the same under the guidance provided above. Thanks!

You are welcome :hugs:

1 Like