forma-javascript v1.0.3

README

A lightweight Javascript Form Library to handle HTML forms and their inputs.

Installation

npm install forma

Also available as download or CDN:

// Referencing downloaded file
<script type='application/javascript' src="path/to/forma@1.0.0.js"></script>

// Or referencing CDN
<script type='application/javascript' src="https://www.tools.rjdesignmanagement.ch/forma/downloads/forma@1.0.0.js"></script>

If you are planning on using Forma's LightBox, then make sure to add the Forma CSS:

// Referencing downloaded file
<script type='application/javascript' src="path/to/forma@1.0.0.css"></script>

// Or referencing CDN
<script type='application/javascript' src="https://tools.rjdesignmanagement.ch/forma/downloads/forma@1.0.0.css"></script>

Usage

Setup

<form id="someForm" class="forma" action="/request/path/or/file.php">

    <label class="forma-label">Some input
    
        <input name="my-email-input"
               type="email">

    </label>
    
    <label class="forma-label">Some input
        
        <input name="myPasswordInput"
               data-forma-strict-password
               type="password">
    
    </label>
    
    <!-- some more inputs here... -->

</form>

Basic Usage

let myForma = new Forma('#someForm'); // any selector possible

myForma.onServerSubmit({
    lightbox: true,
    
    // more settings here ...
    
    validation: true
});

// or

myForma.onSubmit((data, event) => {
    
    // Do something here on submit 
    // (no request sent to server)
    
});

Accessing Form Elements

Forma makes it easier to access your inputs directly by references them with their name tag.

// references name tag
let passwordInput = myForma.inputs.myPasswordInput;

// or
let emailInput = myForma.inputs['my-email-input'];

If an input (or textarea) doesn't have a name it will be accessible as myForma.inputs.noName[<index>].

Forma Properties

Forma Methods

Settings

JMode

JMode is a setting that defines some settings as a preset. These settings were defined by R. J. Design Management and are listed here:

{
    baseURL: window.location.origin,
    before: () => {},
    buttonHide: 2,
    data: undefined,
    error: () => {},
    finally: () => {},
    formaActiveClass: '.active',
    globalMessageDisplayTime: 5000,
    headers: {},
    jmode: true,
    lightbox: false,
    loadingGIF: '.loadinggif',
    messageBox: '.formsuccess',
    messageDisplayTime: 0,
    method: 'post',
    path: form.action || '',
    reloadOnError: false,
    reloadOnFinally: false,
    reloadOnSuccess: false,
    success: () => {},
    timeout: 20000,
    trash: false,
    trashRight: false,
    trashTop: false,
    validation: false
}

To switch jmode on just enable it in the onServerSubmit(settings) like this:

myForma.onServerSubmit({
    jmode: true
});

Validation

Forma offers a more extensive real-time client-side validation than the HTML5 standard. To enable the validation just set the validation setting to true in the onServerSubmit(settings), like this:

myForma.onServerSubmit({
    validation: true
});

To make it work though you need to let Forma know which inputs need to be validated. In the next part, we will explain how this is done.

Inputs / Textareas

All inputs and textareas can add the following attributes to enable the real-time validation:

Email

If the validation setting is set to true then Forma automatically validates all email inputs.

Password Inputs

Password inputs have more attributes that are listed below:

All other validation attributes that were listed in the beginning of this chapter also apply to the password input.

<label>Some password

    <input type="password" data-forma-strict-password required>
        
</label>

Trash

The trash setting allows you to put a trash can in some of the inputs so that they can be cleared easily. The following inputs are supported:

• email
• password
• search
• tel
• text
• url
• textarea

To make this work you need to enable the trash setting in the onServerSubmit(settings) method like this:

myForma.onServerSubmit({
    trash: true
});

Then you need to add the data-forma-trash attribute to the inputs you want to be affected.

<label>Some password

    <input type="password" data-forma-trash>
        
</label>