Javascript library for custom inputs and selects with additional features.

The purpose of the Hai Form library is to provide a basic solution for the most common form field needs. The intention is to cover as many fields as possible so that web developers do not have to use a large number of external libraries when creating forms.

At the same time however, it is not planned to address any field type very deeply. There is a huge number of specialized libraries that focus specifically on particular field types, and the Hai Form library does not aim to try to outdo these libraries.

So if you are happy with a somewhat more basic solution (such as text masks) and don't need any more complex functionality for your forms, the Hai Form library may be ideal for you, otherwise I recommend taking a look at many great libraries listed below that served as inspiration for the Hai Form library.

Download the library files from the 'dist' directory. You can choose between a basic version ('basic' directory) or a version with included external libraries ('with-dependencies').

After downloading the library, import it and insert its CSS styles.

<script type='module'>
   import { HaiInput } from "/your-path/hai-input-class.esm.min.js";
</script>

<link rel='stylesheet' href='/your-path/hai-input.css'>

<!-- If you want, you can also use styles with a dark theme (but the basic hai-input.css is always necessary) -->
<link rel='stylesheet' href='/your-path/hai-input-dark.css' media='(prefers-color-scheme: dark)'>

You can then set the language of the alerts and user error messages.

<!-- Either you can specify the language code corresponding to one of the supported languages (the files are located in the /src/classes/languages directory): -->
<script>
   HaiInput.changeLanguage({
       newLangCode: 'cs'
   });
</script>
  
<!-- Or you can provide the URL to your own dictionary: -->
<script>
   HaiInput.changeLanguage({
       filePath: '/path/to/your/dictionary.js'
   });
</script>
  
<!-- Or you can directly use a translation object: -->
<script>
   HaiInput.changeLanguage({
       dictionary: {
          'port-forbidden': `We do not allow this port.`,
          'path-forbidden': `This part of the url is not allowed.`,
       }
   });
</script>  

You can then start using the library via the HaiInput.create() function. The first parameter specifies the type of form field you want to use, the second is the element to be transformed, and the third contains the specific settings for that field.

<script async>
  let field = document.getElementById('name');
  let parameters = {mask: '000 - AAA', label: 'Code', placeholder: '000 - AAA'};
  await HaiInput.create('text', field, parameters);
</script>

The Fuse.js library is used for searching (filtering) options in selects.

This library is updated irregularly for use with the Vue.js framework. Code is available here: https://github.com/safraja/hai-form-vue

This library was created as part of a thesis, inspiration for its creation was taken from the projects below.

• https://github.com/nosir/cleave.js
• https://github.com/vuejs-tips/vue-the-mask
• https://github.com/uNmAnNeR/imaskjs
• https://github.com/text-mask/text-mask
• https://github.com/igorescobar/jQuery-Mask-Plugin
• https://github.com/estelle/input-masking
• https://github.com/vanilla-masker/vanilla-masker

• https://github.com/Choices-js/Choices
• https://github.com/select2/select2
• https://github.com/sergiodlopes/jquery-flexdatalist
• https://github.com/yairEO/tagify

• https://github.com/dropzone/dropzone
• https://github.com/pqina/filepond
• https://github.com/ProgerXP/FileDrop
• https://github.com/transloadit/uppy

• https://github.com/ckeditor/ckeditor5
• https://github.com/quilljs/quill
• https://github.com/codex-team/editor.js
• https://github.com/nhn/tui.editor

MIT Licence