Validator for Axure

A time-saving tool for automating form error messages in your prototypes.

Spend less time building complicated form interactions and conditions in Axure with our javascript-driven solution.

Features

  • Define mandatory form items with the use of an asterisk
  • Take full control of error message fonts, colours, positions and more
  • Choose between different error highlighting styles
  • Apply fade-in animations
  • Make use of in-line form validation
  • Highlight malformed email and phone number detection
  • Alert users of mismatched passwords

Get the File

Installing and Using Validator

Load the Library

axure-load-library

Unzip and load the library file (axure-form-validator_v1.rplib) into your Axure project. If you're unsure how to do this, visit Axure's page on adding Widget Libraries.

Get Started

Create your form using Axure's default form widgets then follow these additional steps:

1. Drag the Validator button to the stage

2. Mark mandatory form items by adding an asterisk to their labels.

3. (optional) Apply an interaction to the button like opening a new page. Whatever is applied won't get executed until conditions of the form have been met.

4. Preview the page in a browser and test the results by clicking the validation (submit) button

using the form validator

Advanced Settings

After you've dragged the widget to the stage, an item called 'Validator settings' will be added to the project's Masters library. Double click into this item and edit the fields and radio button objects to change various global styles and settings.

*important* Deleting the preferences Master and any of its content will prevent Validator from working. Only edit the checkbox, and radio button items or the values contained within the input fields.

validator-advanced-settings

FAQ

Will Validator work with form widgets from other libraries?

The widget is designed to work with Axure's default form objects which make use of the browser's native controls. Custom designed form objects, such as checkboxes and radio buttons won't work.

How can I customize the error message text?

The default messages for text fields, selection menus, and other items can be changed in the preferences Master item.

Some examples:

"Please enter your [formLabel]."

"We require a [formLabel] to proceed."

"Looks like you forgot to give us your [formLabel]"

*Note* It's important that "[formLabel] be a part of the sentence. It will be substituted with the text contained within the object's label during runtime.

Error messages for single items can also be changed by adding two hyphens to the end of their labels. For example "username*--We need to know what to call you!" will override the default error text and display the text after the hyphens.

validator-custom-messages

Can I change how error messages appear in individual adaptive views?

No, the styles and positions will be the same across each breakpoint.

I want my error messages to appear inside the fields

The widget was designed with best practices in mind for usability and accessibility and therefor this type of behavior is not included

Can I change the design and text of the Validation button?

Yes, the same way you edit any other dynamic panel in Axure. Feel free to replace the existing panel's content with anything you wish!

Is there a way to temporarily disable the Validator?

The Validator can be turned on and off using the "enabled" checkbox at the top of the preferences Master.

I need to illustrate error messages in the Word documentation generated in Axure

The output won't appear in Word documentation as it's dependent on a script that gets loaded within the browser. If this is something that's required, it will have to be added manually.

How does Validator work?

The widget was built using javascript and magic.

Cool! Is there a way to modify the script?

The script is contained within a (hidden) text field to the right of the settings in the preferences Master. Feel free to modify it to suit your particular needs. Note: unfortunately comments need to be removed in order for the script to work.


We hope you find this tool useful! Have feedback? Send it to info@usabilitymatters.com.

 

Error: Please enter a valid email address

Error: Invalid email

Error: Please enter your first name

Error: Please enter your last name

Error: Please enter a username

Error: Please enter a password

Error: Please confirm your password

Error: Password and password confirmation do not match