HexagonJS
Edit Page
Form
Styling for forms using the hx-form class using a specified structure.
Components such as date pickers etc. or custom content should be added inside a container div to prevent style conflicts
Version 2.x
In version 2 of Hexagon, the user experience and interface are being overhauled to add guidelines and improve the general usability of the library.
Additional classes have been added to provide better form styling, including additions to the structure.
It is recommended that forms be created using the Form Builder to help ensure the format of the form is valid, although it is possible to create a form manually, as seen below.
See Inputs for documentation about the new input classes.
Examples

Horizontal Form

HTML

<p class="hx-header-small">Horizontal Form</p>
<form class="hx-form hx-flag-form hx-flag-button">
  <div class="hx-form-group">
    <label class="hx-form-label">Text</label>
    <input class="hx-input" type="text">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Email</label>
    <input class="hx-input" type="email">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Number</label>
    <input class="hx-input" type="number">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Url</label>
    <input class="hx-input" type="url">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Lots of text</label>
    <textarea class="hx-input-textarea"></textarea>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Radio</label>
    <div class="hx-form-items hx-form-columns-2">
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio1" type="radio" value="One" name="group-1">
        <label class="hx-form-label"for="radio1">One</label>
      </div>
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio2" type="radio" value="Two" name="group-1">
        <label class="hx-form-label"for="radio2">Two</label>
      </div>
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio3" type="radio" value="Three" name="group-1">
        <label class="hx-form-label"for="radio3">Three</label>
      </div>
    </div>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Checkbox</label>
    <div class="hx-form-items">
      <div class="hx-form-item">
        <input class="hx-input-checkbox" id="checkbox1" type="checkbox">
        <label class="hx-form-label for="checkbox1" >Value</label>
      </div>
    </div>
  </div>
  <div class="hx-form-buttons">
    <button type="submit" class="hx-btn">Cancel</button>
    <button type="submit" class="hx-btn hx-primary">Submit</button>
  </div>
</form>

Vertical Form

HTML

<p class="hx-header-small">Vertical Form</p>
<form class="hx-form hx-form-vertical hx-flag-form hx-flag-button">
  <div class="hx-form-group">
    <label class="hx-form-label">Text</label>
    <input class="hx-input" type="text">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Email</label>
    <input class="hx-input" type="email">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Number</label>
    <input class="hx-input" type="number">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Url</label>
    <input class="hx-input" type="url">
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Lots of text</label>
    <textarea class="hx-input-textarea"></textarea>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Radio</label>
    <div class="hx-form-items hx-form-columns-2">
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio1" type="radio" value="One" name="group-1">
        <label class="hx-form-label"for="radio1">One</label>
      </div>
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio2" type="radio" value="Two" name="group-1">
        <label class="hx-form-label"for="radio2">Two</label>
      </div>
      <div class="hx-form-item">
        <input class="hx-input-radio" id="radio3" type="radio" value="Three" name="group-1">
        <label class="hx-form-label"for="radio3">Three</label>
      </div>
    </div>
  </div>
  <div class="hx-form-group">
    <label class="hx-form-label">Checkbox</label>
    <div class="hx-form-items">
      <div class="hx-form-item">
        <input class="hx-input-checkbox" id="checkbox1" type="checkbox">
        <label class="hx-form-label for="checkbox1" >Value</label>
      </div>
    </div>
  </div>
  <div class="hx-form-buttons">
    <button type="submit" class="hx-btn">Cancel</button>
    <button type="submit" class="hx-btn hx-primary">Submit</button>
  </div>
</form>
Api
Functions
hx.validateFormformString / HTMLElementoptionsObjectObject
A helper function for validating forms. By default, it will show a message below the first error in the form but will return an array with all the errors.
An example use of this function could be:
hx.select('#form').select('button').on('click', function (event){
  event.preventDefault(); // Stops the form from submitting natively
  var validObj = hx.validateForm('#form');
  if(validObj.valid){
    // Do something on success
  }
  // Do nothing if the form isn't valid (as the validateForm function will show a message)
});
Arguments
formString / HTMLElement
A css selector that selects the form to validate, or the form element itself to validate
options
The options to use when validating the form
Properties
showMessageBoolean
Whether to show the message when validating. When set to false, the validate function will only return the errors without modifying the form.
Default: true
Returns
Object
Properties
errorsArray[Object]
An array of error objects with a message, node and validity property. The node returned will be the div element containing the error that is directly inside the form element.
validBoolean
Whether or not the form is valid
Classes
hx-form.hx-flag-formadded
Display the form using the updated structure. Intended for use with hx-input etc. Inputs and the hx-flag-button class.
<form class="hx-form hx-form-vertical hx-flag-form hx-flag-button">
  <div class="hx-form-group">
    <label class="hx-form-label">Label</label>
    <input class="hx-input" />
  </div>
  <div class="hx-form-group">
    <div class="hx-form-items">
      <div class="hx-form-item">
        <input type="radio" class="hx-input-radio">
        <label class="hx-form-label">Label</label>
      </div>
      <div class="hx-form-item">
        <input type="radio" class="hx-input-radio">
        <label class="hx-form-label">Label</label>
      </div>
      <div class="hx-form-item">
        <input type="radio" class="hx-input-radio">
        <label class="hx-form-label">Label</label>
      </div>
    </div>
  </div>
  <div class="hx-form-buttons">
    <button type="button" class="hx-btn">Cancel</button>
    <button type="button" class="hx-btn hx-primary">Submit</button>
  </div>
</form>
Classes
hx-form-buttons
The container for the form buttons. Should only include hx-btn elements.
hx-form-group
The class to give to the container for each element in a form
Classes
hx-form-items
The class to wrap form items that have multiple elements (e.g. a radio group)
Classes
hx-form-item
The class to wrap an individual form item (e.g. a single radio input + label)
hx-form-label
Styles a label
Extra Classes
hx-form-vertical
Swap the form to a vertical layout.
hx-form
Give to the form element to style forms