Section 2 (Lesson 5/8): This lesson focuses on form validation and workflow configuration, both of which are very important. We'll take a detailed look at how to make sure that inputs from users meet your application's requirements, which enhances both user experience and data integrity.

What you'll learn:

Resources folder: ➡ https://e6387a14ba6d0bf3e823090f8d959...

Bubble editor: ➡ https://bubble.io/page?type=page&name...

Next, we're going to have a look at our three inputs, then our checkbox, then our "Sign up" button, and finally, we can sign up our first user.

I just want to make a quick design change to this input. I can see that our left and right padding is a little bit tight. So I have the first input for "Type your company name" highlighted. We've got it set as a standard input. Let's edit the style, and over on the Layout tab, I just want you to add 16 pixels of left and right padding. The top and bottom padding doesn't matter because we're using a fixed height for these elements. That's much better.

Another thing I'd like to do is if you just highlight these three elements at the bottom - the link, the sign up button, and the checkbox - right-click, "Group elements in" --> a "Column container." We're going to call this "Group Actions." And then we're going to re-apply some gap spacing, this time of 24 instead of 32. Actually, 20 would be better. That's much better.

Okay, so I've highlighted the checkbox. And on the Appearance tab, I say that I've instructed the preset status to be unchecked. That's the default. But I have checked this box here, and this reads, "This checkbox should be checked." Okay. And then over on the email and password on both of these, I've also checked, "This input should not be empty," check. And on the password, actually, we need to do that now. "This input should not be empty," check.

Now, this is where the magic happens, because we've got a button in here, okay? And if we edit the style of the button, we head over to the conditionals tab. We're going to add a new condition here. This one will say the following. So click here to define a condition. Then click the dropdown. Then we're going to say "When This Button isn't clickable is yes." So when this button isn't clickable is yes, then do something to the button. So we're going to need to disable the button when the state exists, or this condition exists. Type color, font color. Change this to the black. Then type color again. C-o-l, background color, and for this, we're going to use our surface color. Actually, in fact, let's make it a slightly darker, let's make it our border color.

And what might be useful here is actually to set up a new color for disabled states. So let's head over to the Style variables, and we have a single variable called borders. I'd like to set up a darker grey or a charcoal grey for various purposes so we're going to create a new color variable. We're going to call this "Charcoal." And we're going to say "Body text, placeholder text and disabled text" in the description. You might think to yourself, "Body text and disabled text?" But the context is different. The Body text would be text on a white page, and the disabled text would be a charcoal color on a grey button, okay? And then create. Let's bring up the swatch. I just want you to drag it to around about 46, yeah, 46 46, 46 will do. Or actually, let's bring this down slightly. There we go. 61, 61, 61. That's more charcoal.

So back on the Sign up button, let's head over to the Appearance tab, edit the style, and let's head back to the condition. Now I want you to make the font color, when "This Button isn't clickable is yes," change it to this new charcoal color. So this is a really versatile color for various things.

What else can we use it for? Well, we said Body text. So here is some Body text. This subtitle is Body small, so it's Body. So on the Edit Style, let's now change the font color to charcoal. Looking good. Heading back to the Design, now we have some visual hierarchy in place, you can see that this stands out far more than this, and that's what we want.

So let's first set up this signup workflow, and then we'll come back and look at the form validation. So we're going to add a workflow on the "Sign up" button. We're going to choose "Account," and first one, "Sign the user up." Now, Bubble is saying: "where is the email and where is the password?" And this is where we have to connect the front-end and the workflow section. I'm going to say "Input Type your email" and then the value of it: "Input Type your email's value". Let's do the same with password: "Input Type your password's value."

So we're not going to require a password confirmation. This is up to you if you'd like two password fields, but these days I prefer my sign up forms to be super short. But we are going to an email to confirm the email, so I'm going to check that box. And that bubble is saying, "where is a confirmation page?" And that's something we actually need to create. So we're going to come back to that in a second.

The next one is "Remember the email," which basically means next time you land on this page, should we just pop your email back in so you don't have to type it? Again, this is up to you. Sometimes we want to let a user know or give them the option through a checkbox if they want to enable this functionality. Perhaps they're on a shared computer. We're going to leave it to "No" for now. And we can also collect other inputs and other data, which we will be doing in a second. But for now, let's go back to the Design tab and let's preview this page again.

Okay, so see what happened here? We have a greyed out or a disabled state for our button set through our Conditional tab, and we have that because Bubble is smart enough to know that these inputs cannot be empty. Something needs to be in those inputs for this button to work. So let's just type in a random email here. Bubble is basically looking for an @ symbol with a domain name afterwards. So I can type in [email protected], and then just a random password. And you can see that the button has become blue. Perfect. But what about these two options here? We're talking about form validation, so we've got a little bit more work to do until we allow a user to sign up.

Let's head back to the Editor. On this button, "Button Sign up," I'm going to go across to the Conditional tab. I need to define another condition. This one will read "When Checkbox I agree to the terms isn't checked," then, we check "This element isn't clickable." Let's test that. Type a random email and password, and you can see we're still greyed out, but let's now make a selection here (on the checkbox), and we're back to blue. And at this stage, Bubble recognizes that the terms of service needs to be checked, so we're going to show an error color here.

Now, the last thing we need to do is just make sure that a user cannot sign up without making a selection. And for that, we're going to reference the custom state. And what we're going to do here, and this is an extension of this concept of writing these conditional expressions, we can use an "And" or an "Or" operator to basically daisy chain or connect multiple expressions together. And these multiple expressions form multiple conditions.

So if I click on the words "isn't checked," and this little "More..." option comes up. Let me click that. Now, I've got two operators. So I want it to be "and" because both the state has to be selected and the checkbox checked for this to read true. And now we're going to reference the state. Now, remember in the previous lesson, I mentioned that the state is set to the page, and I always do that and that's up to me, how I design my apps. But at least I know where it is. So in this instance, I need to find it, I know where it is. It's probably set at the page level or attached to the page. I'm going to type "sign" to bring up the page called "sign-up," and there it is: custom state User Type. And this is a new operator, this time we're going to say "is empty," but actually I realized we've got this checked, so we need to change from an "And" to an "Or." So let me read this out for you in plain English: when the checkbox isn't checked or the state is empty, which is its default state, then this element isn't clickable. Okay? So we have two conditions and then one result. Let's test this. So let's go through this process again. Okay, so the button is still disabled, the button is still disabled, and now we can run this workflow.

So that concludes this lesson. When you come back, we're just going to finalize. We've got a few more things to do on this page because I'd then like to make a clone of this page to then look at our login page. So I'll see you in the next lesson.