© 2002-2017 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

 

REQUIRED FIELDS

Check that a required field has been completed before submitting a form.

STEP 0: DOWNLOAD THE TRAINING FILE

If you don't already have it, download AxureTraining.rp and open it up in Axure RP. This file contains pages corresponding to each of the tutorials on the Axure training site. We recommend always completing the tutorials using our prepared file, but if you can't, that's okay too—we'll always tell you what to build in a new file in order to complete each tutorial without using AxureTraining.rp.

STEP 1: SETUP

In your copy of AxureTraining.rp, open the page named "Required fields".


The page contains a text field that gets an email address entered and a submit button. It also contains a dynamic panel with two states: "Success" and "Error". The email address field needs to be filled in order for the "Success" message to show. If not, the "Error" state shows.


Select the "Submit message" dynamic panel and hide it by clicking the "Hidden" checkbox in the Style tab.

STEP 2: SHOW THE ERROR MESSAGE IF THE EMAIL FIELD IS BLANK

Select the submit button widget. In the Properties tab, double-click "OnClick" to add a new OnClick case.


At the top of the Case Editor, click the "Add Condition" button to open the Condition Builder.


Leave the first dropdown set to "text on widget". In the second dropdown, choose the “Email address” widget.


The next two dropdowns should be set to "equals" and "value".


In the final field, clear the text so that the field is blank.


Click "OK" to close the Condition Builder.

In the Case Editor, click "Set Panel State" in the left column.


In the right column, check the "Submit message" dynamic panel.


At the bottom of the column, use the "Select state" dropdown to select the "Error" state. Then, click the checkbox "Show panel if hidden".


In the left column, click the "Wait" action.


In the right column, you can configure the length of the "wait" action. Change it to 2000 ms.


If the left column, click the "Hide" action.


In the right column, check the "Submit message" dynamic panel.


Click "OK" to close the dialog.

STEP 3: SHOW THE SUCCESS MESSAGE IF THE EMAIL FIELD IS NOT BLANK

Again double-click "OnClick" in the Properties tab to add a new OnClick case.


Don't add any conditions to this case. In the center column, notice the text "Else if true". This new case will fire if the previous case does not fire.


In the left column, click the action "Set Panel State".


In the right column, check the "Submit message" dynamic panel.


At the bottom of the column, use the "Select state" dropdown to select the "Success" state. Then, click the checkbox "Show panel if hidden".


In the left column, click the "Wait" action.


In the right column, you can configure the length of the "wait" action. Change it to 2000 ms.


If the left column, click the "Hide" action.


In the right column, check the "Submit message" dynamic panel.


Click "OK" to close the dialog.

STEP 4: PREVIEW

Click Preview.


Try clicking the submit button without entering any text in the email field. When the error message goes away, try entering text in the email field and then clicking the submit button again.

MORE RESOURCES

CORE TRAINING

Getting Started

Flow Diagrams

Static Wireframes

Interactive Prototyping

Collaboration

TUTORIALS

Interactive Button

Text Link

Show Hidden Widget

Navigation Menu

Tab Control

Lightbox

Flyout Menu / Custom

     Tooltip

Accordion Control

Account Login

Image Carousel

Auto-Tab Fields

Required Fields

Dynamically Set

     Droplist Options

Set Text with Droplist

Pass Text to Next Page

Full-Width Image or

     Banner

Scroll-Activated Sticky

     Header

Slider

Drag and Drop

Embed Media

Scrollable Table

Set Dynamic Panel State

     on Next Page

Table with Images

Terms and Conditions

Custom Icon Button

Custom Text Field

Custom Checkbox and

     Radio Button

Custom Droplist

Custom Datepicker

MOBILE TUTORIALS

Swiping Slideshow

Scrolling Content

Sliding Menu

Toggle Switch

Animated

     Screen Transition

REPEATER

TUTORIALS

Basic Repeater -

     Dynamic Table

Sorting Rows

Filtering Rows

Adding, Deleting, and

     Updating Rows

Marking Rows

Advanced Repeater -

     Product Listing

Reference Pages

Advanced Filtering

Pagination

REFERENCE GUIDE