Validating required fields in your forms

With Justinmind, you can create an input form with required fields and placeholders in your prototypes.

In our example, we will use Constants to ensure that users input text in the required input fields. Constants are fixed value that can be used to build a condition – learn more here

Input form with required fields - UI prototype

To validate required fields in your form, follow these steps:

Designing the structure of your form

First of all, we’ll create a new web prototype and drag all the relevant components of the prototype to the canvas.

  1. Drag a Dynamic Panel to the canvas and resize it to match our example (443 x 306 px). Add a second panel by clicking on ‘+’ at the top of the Dynamic Panel.
  2. Drag six Input Text Field widgets into the center of Panel 1, and rename them in the Value box in the Properties palette as: First name, Surname, Address, Postal Code*, Email*, and Phone number*.
    • The Input fields that contain the ‘*’ character will require the user to input text in them in order to complete the form: they will be the required input fields. Additionally, note that the email field will require a “xxx@xxx” format.
  3. Now, drag a Text widget into the top left-hand corner of Panel 1, rename it “Sign up” and customize it so that it appears as the header of the screen.
  4. Next, drag a Button widget to the bottom center of Panel 1 and rename it “Create account”.
  5. In Panel 2, drag another Text widget, an Image widget and another Button widget to the panel. Customize these widgets to match our example. This panel will serve as the screen that users will reach upon successfully filling in the form in Panel 1.
    • interactive-prototypes-input-form-layout-1
  6. Finally, go to the Variables palette. Create three variables: “control-postalcode”, “control-email” and “control-phonenumber”.
    • interactive-prototypes-input-form-variables
    • These variables will ensure that the user fills in the required fields in order to complete the form successfully.

Adding interactions to your form

We have now created a static input form. Now, we’ll add events to make our form interactive, and constants to identify which fields must be filled in to successfully create an account.

  1. Select the “Create account” button in Panel 1 and go to the Events palette. Add an “On Click” + “Set Value” event, selecting the “control-postalcode” variable from the Variables palette. Below, type “OK” into the text field and click “OK”.
    • interactive-prototypes-input-form-variables-2
  2. On the left of the event you have just created, click the “add condition” link. Build the following expression dragging functions and constants, and the relevant component from the Screens palette: “Regular expression” function + “Postal Code*” Input Text Field + “Postal Code” constant. Click “OK”.
    • interactive-prototypes-input-form-expression-1
  3. Back in the Events palette, right click on the event you have just created, and select “Add event after selected”. Add an “On Click” + “Change Style” action, selecting the “Postal Code*” Input Text Field. Below, check the Border and Text boxes and click “OK”. This action will ensure that when the text is inputted into the Postal Code box, the style will remain as it is.
  4. In the Events palette, ensure that the link between the event and the action is set to “WITH previous”.
  5. Finally, on the right of this action, click “Else” and add another “On Click” + “Change Style” action, again selecting the “Postal Code*” Input Text Field and checking the Border and Text boxes below. This time, change the style of the border and the text to red. The red style will ensure that when text is not inputted into the Postal Code box, the user will be reminded to add some.
    • interactive-prototypes-input-form-event-change-style
  6. Repeat this step for the other required input fields (Email and Phone number). Remember to add the corresponding variable, the correct components in the Expression builder, and the correct Input Text Fields accordingly.
  7. Once you have events for all 3 required fields, add another event to the “Create Account” button. Add an “On Click” + “Set Active Panel” event, selecting Panel 2 from the Outline palette. Click “OK”.
  8. On the left of this event, click the “add condition” link. Add the following expression with functions and click “OK”:
    • interactive-prototypes-input-form-expression-2
    • The last thing we’ll do is to create a set of events that allow the user to go back and try the form again, with the fields reset.
  9. Select the “Go Back” button in Panel 2. Add an “On Click” + “Set Active Panel” event, selecting Panel 1 from the Outline palette. Click “OK”.
  10. To reset the input fields, right click on the event you’ve just created, and select “Add action after selected” . Add an “On Click” + “Set Value” event. Select the “Postal Code*” Input Text Field . Below, enter the default text of the Postal Code Input Text Field (in our case, “Postal Code*”) into the input field and click “OK”.
    • interactive-prototypes-input-form-event-set-value
  11. Repeat this step for all the other input fields (First name, Surname, Address, Email and Phone number) accordingly. Ensure that the link between the event and the action is set to “WITH previous”.

And that’s it! Click “Simulate” to interact with and enjoy your input form in your prototype.

Note: ensure that you delete the default text in each input field before inputting new text.

You can download our example here.