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
Examples

HTML

<form class="hx-form hx-margin">
  <div>
    <label>Text</label>
    <input type="text">
  </div>
  <div>
    <label>Email</label>
    <input type="email">
  </div>
  <div>
    <label>Number</label>
    <input type="number">
  </div>
  <div>
    <label>Url</label>
    <input type="url">
  </div>
  <div>
    <label>Radio</label>
    <div id="group-1">
      <div>
        <input id="radio1" type="radio" value="One" name="group-1">
        <label for="radio1">One</label>
      </div>
      <div>
        <input id="radio2" type="radio" value="Two" name="group-1">
        <label for="radio2">Two</label>
      </div>
      <div>
        <input id="radio3" type="radio" value="Three" name="group-1">
        <label for="radio3">Three</label>
      </div>
    </div>
  </div>
  <div>
    <label for="checkbox1" >Checkbox</label>
    <input id="checkbox1" type="checkbox">
  </div>
  <div>
    <label>Tag Input</label>
    <div>
      <div id="tagInput"></div>
    </div>
  </div>
  <div class="hx-form-buttons">
    <button type="submit" class="hx-btn hx-positive"><i class="fa fa-paper-plane"></i> Submit</button>
  </div>
</form>

JavaScript

var tagInput = new hx.TagInput('#tagInput')
tagInput.items(['a','b'])
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
Give to the form element to style forms