5 Help and Validation

To aid Builder users we have established different levels of help and help interaction patterns to address specific interaction and feedback needs.

5.1 Form Validation

If on validation, a field-level error exists, along with the page level notification, display a red border around the field and a red error message below it.

Email address

Email address required

<div class="form-group has-error">
    <label for="exampleInputEmail1" class="control-label required">Email address</label>
    <input type="email" class="form-control input-lg" id="exampleInputEmail1" placeholder="Email" required>
    <div class="help-block">
       <p ng-message="required" class="ng-binding ng-scope">Email address required</p>
    </div>
</div>

5.2 Critical Error-Avoidance

Any help that can be offered that allows a user to avoid making an error while completing a form should display directly under the field at all times. An example of this type of help content is “Must start with a lowercase alpha character, followed by any combination of alphanumeric characters, 3-16 characters”

Label

Must start with a lowercase alpha character, followed by any combination of alphanumeric characters, 3-16 characters

<div class="form-group">
  <label for="error-avoidance-sample"" class="control-label">Label</label>
  <div class="y-counter">
    <input type="text" id="error-avoidance-sample" class="form-control input-lg">
  </div>
  <span class="help-inline {$modifiers}">
   <span class="hyicon hyicon-helpoff help-icon-inline"></span>
   <span class="help-block-inline">Must start with a lowercase alpha character, followed by any combination of alphanumeric characters, 3-16 characters</span>
 </span>
</div>

5.3 Inline Character Counter

Display the remaining characters for a input or textarea when the formfield is in focus.

NOTE: This is a static example. Javascript functionality is not provided by techne.

Label

Maximum text length is 30 characters

Append this class when the limit is reached

.y-counter-error

Label

Maximum text length is 30 characters

<div class="form-group">
  <label for="character-counter-sample" class="control-label">Label</label>
  <div class="y-counter">
    <input type="text" max-character="35" id="character-counter-sample" class="form-control input-lg">
    <span class="y-counter-number {$modifiers}">30</span>
  </div>
 <span class="help-inline {$modifiers}">
   <span class="hyicon hyicon-helpoff help-icon-inline"></span>
   <span class="help-block-inline">Maximum text length is 30 characters</span>
 </span>
</div>

5.4 Additional Inline Help State: On-Demand (Help Bubble)

By default, all Additional Inline Help is only accessible via the ? icon or “help bubbles.” Use ‘help bubbles’ when ‘all help on’ is set to false. Place a help icon next to the form field or section. When hovering over the help icon or on a touch event, the system displays a text bubble that shows the same content as the inline help.

Label Start with a letter, use only lowercase alphanumeric characters, 3-16 characters

 <div class="form-group">
   <label class="control-label">Label</label>
   <span class="help-inline help-inline--tooltip">
     <span class="hyicon hyicon-helpoff help-icon-inline"></span>
     <span class="help-block-inline">Help message goes here</span>
   </span>
   <input type="text" name="Project Description" class="form-control input-lg" >
   <span class="inline-hint-text">Start with a letter, use only lowercase alphanumeric characters, 3-16 characters</span>
 </div>

5.4 Additional Inline Help

Any additional help that can be offered allowing a user to get more information about the field or the task they are being asked to complete should display either on click/hover of the adjacent ? icon, or above the error-avoidance inline help, if help mode is toggled to “On”. An example of this type of help content is "The service identifier must be unique within your organization. It will appear as part of the Proxy URL where the {name[identifier]} placeholder is currently displayed."

5.5 Page Level Help

Page-level help will always display IF it exists, but it isn’t required. Whether or not page-level help is included is at the discretion of each team. Use this pattern only on complex pages with unfamiliar concepts and provide a source for detailed information.

Do: Add builder modules to make your services configurable in YaaS Builder.
Don't: Find below a list of all members assigned to your project.

Page level help message goes here

<div id="demo-page-background">
  <div class="navbar navbar-default y-navbar-centered y-navbar-lg">
    <div class="container-fluid">
        <div class="navbar-left">
            <button class="btn-subordinate btn navbar-btn">
                <span class="hyicon hyicon-back"></span> <span class="hidden-xs">Back</span>
            </button>
        </div>
        <div class="y-navbar-center">
            <div class="y-navbar-center-content">
                <h1>Long Page Title</h1>
            </div>
        </div>
        <div class="navbar-right">
            <div class="y-toolbar">
                <div class="y-toolbar-cell">
                    <button class="btn btn-subordinate navbar-btn">Cancel</button>
                </div>
                <div class="y-toolbar-cell">
                    <button class="btn btn-warning navbar-btn">Save</button>
                </div>
            </div>
        </div>
    </div>
  </div>
  <div class="container-fluid body-content">
     <span class="page-level-help-message">Page level help message goes here </span>
  </div>
</div>

5.5 Feedback Menu

Combines the Feedback and Get Help options in one widget. Using two independent icon buttons.

<div class="feedback-menu">
 <span class="hyicon hyicon-feedback button-icon"></span>
 <span class="hyicon hyicon-gethelp button-icon"></span>
</div>

5.6 Additional Inline Help

Users can choose to enable “Help Mode” using a toggle in the footer of the left navigation panel or from the “My Profile” section. This will display all Additional Inline help on the page. Use ‘inline help’ when ‘all help on’ is set to true. Inline Help is displayed below a form field.

Label I'm a additional Inline Help

.help-inline--tooltip

Label

<div class="form-group">
  <label class="control-label">Label </label>
  <input type="text" name="Project Description" builder-input="noRestriction" class="form-control input-lg" >
	<span class="help-inline {$modifiers}">
		<span class="hyicon hyicon-helpoff help-icon-inline"></span>
		<span class="help-block-inline">I'm a additional Inline Help</span>
	</span>
</div>

5.7 Section Level Help

Section-level help will always display IF it exists, but it isn’t required. Section-level help is displayed below the section title. Whether or not section-level help is included is at the discretion of each team.

I'm the Section Headline

I'm a additional Inline Help Text

.help-inline--tooltip

I'm the Section Headline

<section>
   <div class="section-header">
     <h2 class="section-headline">I'm the Section Headline</h2>
     <span class="section-help help-inline help-inline--section {$modifiers}">
         <span class="hyicon hyicon-helpoff help-icon-inline"></span>
         <span class="help-block-inline"> I'm a additional Inline Help Text</span>
     </span>
   </div>
</section>

5.8 Section Inline Level help for read-only fields

Service Name

read-only content styling with inline level help

<div class="form-group form-group__inline">
    <label class="control-label">Service Name</label>
    <div class="form-readonly-text">read-only content styling with inline level help </div>
    <span class="section-help help-inline help-inline--section help-inline--tooltip">
        <span class="hyicon hyicon-helpoff help-icon-inline"></span>
        <span class="help-block-inline">I'm a additional Inline Help Text - inlined</span>
    </span>
</div>