Using Branches for Form Validation

Branches are a very powerful tool for changing the flow of a guide when filling out a form.

But there is much more to branches and forms. Iridize allows you to use branches to validate user input.

  • What if the user did not make the expected selection in the drop down menu?
  • What if the user had left a field blank?
  • What if the user had entered a password which is too short?

Combining branches with the Iridize conditions framework gives you the power to verify user choices.

Let's see how to do this with Iridize.

All of the examples are based on the YouTube form for editing a video's basic information.


Example 1 - Enforcing a Selection

For this example, let's make sure that the user sets the video to be Public.

Our guide will look something like this:

  1. Select Public from the Privacy Settings drop down
  2. Great, you've selected Public.

In order to make the user select Public we will create a loop so that if Public had not been selected we will remain on step #1 instead of advancing to step #2. 

The natural flow of any walkthrough guide is to move from one step to the next (i.e. from step 1 to step 2, from 2 to 3 and so on). In order to break this flow we will add a branch. Before naturally moving to the step #2, Iridize will inspect all branches and if all of the conditions for a certain branch are met that branch will be taken.

In our example, 

If the user did not select Public from the drop down menu we want the guide to goto step #1. First, we will setup the branch (jump to the first step in the guide).

Than we will click to Add/Edit the condition:

Iridize is fully aware of what a drop-down menu is; when selected it will automatically choose the selected value and mimic the drow-down so that you could select the value of choice.

Note that if the user did select Public, our branch conditions will not be met and Iridize will default to the natural flow and advance to step #2.


Example 2 - Disallow Empty Field

For our second example, on the same Youtube form, let's make sure the user selects a title for the video.

Much like in the previous example, our guide will have the following 2 steps:

  1. Name your video.
  2. Great! Name given.

The branch is going to be very similar. In fact the only difference is going to be in the condition. Here, since we are not testing against a drop-down menu we will create the following condition:

The strange looking [$^] is a the regular expression way of saying "empty". While this is somewhat complex, the fact that Iridize uses a regular expression engine allows you to very powerful text conditions like:

  • has the word acme or corp - [acme|corp]
  • at least 8 characters long - [\w{8}]
  • only numbers and letters (e.g. no special symbols) - [^\w+$]
  • capital first letter and only small letters after - [^[A-Z][a-z]+$]

The surrounding [] are for letting iridize know there is a regular expression inside.

And here's the video:

Have more questions? Submit a request


Please sign in to leave a comment.