Validator for Axure
A time-saving tool for automating form error messages in your prototypes.
- 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
Installing and Using Validator
Load the 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.
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
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.
FAQWill 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.
"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.
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 includedCan 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 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 email@example.com.