Forms

Often overlooked, form text fields within modals or on a page are common elements that require definition as they are frequently used for a variety of applications. Well thought out, vetted forms should provide the user with an expected and efficient experience not only in it’s input function but also in its validation. Based on contributions from the Cockpit team, a form fields with input validation pattern has been devised. This pattern includes details about the form text fields, validation at both the form and field level as well as operational behavior.

Jump to Within a Modal, Within a Modal with Error, Within a Page or Within a Page with Error

Within a Modal

Form within a modal

Within a Modal with Error

Form within a modal with an error

Within a Page

Form within a page

Within a Page with Error

Form within a page with an error

Forms

Form Text Fields

Form in a modal

  1. Field Labels: Do not include a colon at the end. Visit the Capitalization section of Terminology and Wording for information regarding capitalization.
  2. Primary Input Field: This field gets focused when the modal appears. The initial primary input field is usually the first input field which is required.

Additional notes about behavior for form fields

  • Populate fields with default values when possible.
  • Support Enter key for button activation in the modal.
  • If there is only one input field, pressing Enter key behaves the same as clicking primary button.
  • Support Tab key (to progress forward) and Tab+Shift (to move backward) keys to move between input fields.
  • Support the Tab key for all interactive elements. The sequence of tab indices should be determined according to the positions of the elements, from top to bottom, from left to right.
  • Support Esc key to dismiss the modal without saving changes.

Validation

Form with an error

  1. Form Level Validation (optional): When the user submits the form, the entire page/modal is reloaded with indications of validation errors for each error via an inline notification. This notification is located at the top of the page, describes what the error is and preferably, offers guidance about how to fix the error. Additionally, if possible, you may want to inform the user the number of error(s) that have occurred, particularly if some of the errors are beyond the user’s current view.
    • Depending on application constraints, dynamic (on the fly) dismissal of errors would be ideal as it provides a visual cue that the user has corrected the error.
  2. Field Level Validation: In addition to the optional inline notification, the erroneous fields are indicated with a red outline with a message below the field describing the error and/or how to fix the issue.
    • Ensure validation is relevant to the field.
    • Messages should be specific and offer solutions.

## Operational Behavior

Form with callouts

The modal operation happens with the modal still open. Clicking the affirmative button starts the operation. If the operation completes successfully, the modal is closed.

  1. Progress indicator: While the operation is happening, a spinner and processing text is displayed to the left of the buttons. Processing text should be succinct.
    • The modal should be designed in a manner to proactively designate space for the spinner to avoid reflow. The small spinner recommended as it is more conservative on space.
  2. While operation is happening, everything in the modal is disabled, except the Cancel button.
  3. Clicking the Cancel button during the operation cancels the operation and keeps the modal open.

Required Fields

Form with all fields required

  1. Required field: Required fields should be denoted with an * (asterisk) symbol.
    • Due to responsiveness issues, we do not recommend labeling optional fields with “(optional)”
  2. Forms with a mixture of required and optional fields should include this explanation.

Form with all fields required

  1. Forms in which all fields are required should include this explanation.
  2. Forms in which all fields are optional should include this explanation.

What’s not covered in the current design but will be covered in future sprints:

  • Form Layouts
    • Basic, inline, and/or horizontal form
    • right-aligned vs. left-aligned labels
  • Indicating required fields vs. optional
  • Syntax hints
  • Buttons
  • Field-level validation on text entry
  • Repeat user error validation

Jump to Within a Modal, Within a Modal with Error, Within a page or Within a Page with Error

Within a Modal

Reference Markup


<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        
        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="modalInput">Default</label>
            <div class="col-sm-10">
              <input type="text" id="modalInput" class="form-control"></div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="modalInputDisabled">Disabled</label>
            <div class="col-sm-10">
              <input type="text" id="modalInputDisabled" class="form-control" disabled></div>
          </div>
          <div class="form-group ">
            <label class="col-sm-2 control-label" for="modalInputError">No error</label>
            <div class="col-sm-10">
              <input type="text" id="modalInputError" class="form-control">

            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

  

Within a Modal with Error

Reference Markup


<div class="modal" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="alert alert-danger">
  <span class="pficon pficon-error-circle-o"></span>
  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
</div>

        <form class="form-horizontal">
          <div class="form-group">
            <label class="col-sm-2 control-label" for="modalInput">Default</label>
            <div class="col-sm-10">
              <input type="text" id="modalInput" class="form-control"></div>
          </div>
          <div class="form-group">
            <label class="col-sm-2 control-label" for="modalInputDisabled">Disabled</label>
            <div class="col-sm-10">
              <input type="text" id="modalInputDisabled" class="form-control" disabled></div>
          </div>
          <div class="form-group has-error">
            <label class="col-sm-2 control-label" for="modalInputError">With error</label>
            <div class="col-sm-10">
              <input type="text" id="modalInputError" class="form-control">

              <span class="help-block">Please correct the error</span>

            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

  

Within a Page

Reference Markup

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="exampleInput">Default</label>
    <div class="col-sm-10">
      <input type="text" id="exampleInput" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="exampleInputDisabled">Disabled</label>
    <div class="col-sm-10">
      <input type="text" id="exampleInputDisabled" class="form-control" disabled></div>
  </div>
  <div class="form-group ">
    <label class="col-sm-2 control-label" for="exampleInputError">No error</label>
    <div class="col-sm-10">
      <input type="text" id="exampleInputError" class="form-control">

    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Primary Action</button>
      <button type="submit" class="btn btn-default">Secondary Action</button>
    </div>
  </div>
</form>

Within a Page with Error

Hey there is a problem! Yeah this is really messed up and you should know about it.
Please correct the error

Reference Markup

<div class="alert alert-danger">
  <span class="pficon pficon-error-circle-o"></span>
  <strong>Hey there is a problem!</strong> Yeah this is really messed up and you should <a href="#" class="alert-link">know about it</a>.
</div>

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label" for="exampleInput">Default</label>
    <div class="col-sm-10">
      <input type="text" id="exampleInput" class="form-control">
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label" for="exampleInputDisabled">Disabled</label>
    <div class="col-sm-10">
      <input type="text" id="exampleInputDisabled" class="form-control" disabled></div>
  </div>
  <div class="form-group has-error">
    <label class="col-sm-2 control-label" for="exampleInputError">With error</label>
    <div class="col-sm-10">
      <input type="text" id="exampleInputError" class="form-control">

      <span class="help-block">Please correct the error</span>

    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">Primary Action</button>
      <button type="submit" class="btn btn-default">Secondary Action</button>
    </div>
  </div>
</form>