Studyportals form-generator

This package is a component which turns the provided form element snippets into a D² visualized element.

Getting Started

Implement form-generator

There are multiple ways of importing the styles. If you require compiled styles, you can use the dist.

Importing styles

Uncompiled (preferred way)

form#StudyportalsForm {
  @import './node_modules/@studyportals/form-generator/src/sass/FormGenerator';
}

Compiled

@import './node_modules/@studyportals/form-generator/dist/css/FormGenerator.css';
//OR
@import './node_modules/@studyportals/form-generator/dist/css/FormGenerator.min.css';

Importing javascript

import FormGenerator from '@studyportals/form-generator';

const form = document.getElementById('StudyportalsForm');
const fgForm = new FormGenerator(form);
fgForm.generate();

Inserting HTML snippets

Example with mandatory HTML

To successfully implement an minimal version of the input you need the follow HTML snippet. Remember this is the smallest possible version of an input form.

Important: The order of FgInput, FgLabel & .FgMessageContainer are not to be switched.

<form class="FgForm" name="ExampleForm" novalidate autocomplete="off">
  <div class="FgElementWrapper">
    <input
      id="ExampleId"
      name="ExampleName"
      class="FgInput js-Input"
      type="text"
    >

    <label class="FgLabel" for="ExampleId">Example</label>
  </div>
</form>

Example with mandatory with optional HTML

There are some extensions for the input:

• Input that needs validation based on input type: data-need-validation="true"
• Input fields that are required: <span class="FgMessage RequiredMessage">Mandatory</span>
• Input fields that need explanation when the user focus on it: <span class="FgMessage HelperMessage">This message should help people.</span>
• Input fields that are required and have validation that explains the user what is wrong: <span class="FgMessage ErrorMessage">This is not a valid Example.</span>

<form class="FgForm" name="ExampleForm" novalidate autocomplete="off">
  <div class="FgElementWrapper">
    <input
      id="ExampleId"
      name="ExampleName"
      class="FgInput js-Input"
      type="text"
      data-need-validation="true"
      required
    >

    <label class="FgLabel" for="ExampleId">Example</label>

    <div class="FgMessageContainer">
      <span class="FgMessage RequiredMessage">Mandatory</span>
      <span class="FgMessage HelperMessage">This message should help people.</span>
      <span class="FgMessage ErrorMessage">This is not a valid Example.</span>
    </div>
  </div>
</form>

Develop on project

1. npm run dev

The distribution files will be automatically generated while committing changes.

Distributed files

|- dist/
  |- css/
    |- FormGenerator.css
    |- FormGenerator.min.css
|- src/
  |- sass/
    |- FormGenerator.scss

License

The code is available under the BSD 3-Clause License.