This tutorial shows us how to make a form with multiple required fields and multiple error messages using conditional logic and toggling an "Else If" to an "If".

Conditional Logic Tutorial

Required Fields

Multiple "If" Statements

That one was a little tricky. If you followed along easily, you can safely say you are a conditional logic expert.

In the Case Editor, click "Show Panel(s)" and select the checkbox for UsernameErrorPanel. Click OK to close the Case Editor. 

Generate the prototype and test it out.  If you leave the UsernameTextField blank and click Submit, the error message will show.

Still need help? Check out the forum or drop us a line at support@axure.com.

© 2002-2012 Axure Software Solutions, Inc. All rights reserved.

The Round Up

(AxureRequiredFields.zip)

This zip file contains the RP file needed to complete this tutorial

Add a second case to the Submit button by double-clicking OnClick. Click "Hide Panel(s)" and check the checkbox for UsernameErrorPanel. Click OK to close the Case Editor.

Select "Generate > Regenerate current page to prototype" in the menu and refresh the prototype in your browser to test the new case. If you leave the username text field blank and hit submit the error panel will show. If you then enter text into it and click Submit again, the error message will be hidden.

Add a third case by double-clicking OnClick.  This time, add the condition "If text on widget PasswordTextField equals (blank)" and leave the value text field blank. Click OK to close the Condition Builder. 

In the Case Editor select "Show Panel(s)" and click the checkbox for  "PasswordErrorPanel". Then, click OK to close the Case Editor.

Right-click Case 3 and select Toggle IF/ELSE IF.  This will change the "Else If" to an "If". Now Case 3 can happen even if Case 1 or Case 2 is performed.

Regenerate the prototype and test it out.  Leaving both text fields blank should make both error panels show.

Now we can add a fourth case to hide the error message if a value has been entered into the Password text field.

Double-click OnClick to create Case 4.  Select "Hide Panel(s)" and select the PasswordErrorPanel. Click OK to close the Case Editor.

First, open RequiredFields.rp and open the "Required Fields" page.

Select the Submit button and add a case to the OnClick event. In the Case Editor, click Add Condition.

In the Condition Builder, setup the condition "text on widget UsernameTextField equals value (blank)" leaving the value text field blank. Click OK to close the Condition Builder.

The last case will contain the conditions and actions for a successful login.

Add Case 5 by double-clicking OnClick. Click Add Condition and setup the first row of the condition to say "visibility of panel UsernameErrorPanel equals value false".

Then, click the plus icon to add a second row. Set this row to say "visibility of panel PasswordErrorPanel equals value false".  Click OK to close the Condition Builder.

In the Case Editor, click Open Link in Current Window, and select Page 1.

Click OK to close the Case Editor.

We want the success case to be an IF statement so it is always evaluated regardless of which cases above it were performed. Right click on Case 5 and select Toggle IF/ELSE IF.

That's it! Generate a prototype and test it out.

Step 1: Add conditional to OnClick case

Step 2: Add an action to show panel

Step 3: Add second case to hide panel

Step 4: Add third case to check Password field

Step 5: Toggle IF/ELSE IF for Case 3

Step 6: Add fourth case to hide panel

Step 7: Add final case with "success" conditions

Step 8: Add action to link to Page 1

Step 9: Toggle IF/ELSE IF

Step 10: Generate the prototype

Next: Dynamic Panels (Advanced) Article

Back to Conditional Logic