formJS

Get Started

Install

Include the library script in your page:

<script src="https://unpkg.com/formjs-plugin@5"></script>

<script src="https://cdn.jsdelivr.net/gh/simplysayhi/formJS@5/dist/formjs.min.js"></script>

or Install via NPM and import as ES Module:

npm install formjs-plugin

import Form from 'formjs-plugin'

You can also import Lite version and some extras, for example:

import Form from 'formjs-plugin/lite'
import { username } from 'formjs-plugin/additional-rules'
import { username } from 'formjs-plugin/additional-errors'
import { initCharLengthFields } from 'formjs-plugin/utils'

In folder dist ( and via CDNs ) are also available these versions:

ES Module
SystemJS
Lite - in folder dist/lite

HTML

Basic example of HTML structure to make the validation works.
formJS uses default HTML attributes to:

setup some instance options
enable JS validation

<form action="/mypath/mypage.php" method="POST" novalidate name="my-form-example">

    <!-- BASIC TEXT INPUT -->
    <div data-formjs-question>
        <label>Name</label>
        <input type="text" name="myName" />
    </div>
    
    <!-- REQUIRED FIELD WITH HTML STANDARD TYPE ( EMAIL ) -->
    <div data-formjs-question>
        <label>Email</label>
        <input type="email" name="myEmail" required />
    </div>

    <!-- REQUIRED FIELD WITH CUSTOM VALIDATION ( FISCAL CODE ) -->
    <div data-formjs-question>
        <label>Fiscal Code</label>
        <input type="text" data-subtype="fiscal-code" name="myFiscalCode" required />
    </div>
    
    <button type="submit">SEND</button>
    
</form>

Some notes about form attributes ( if set, they will replace options passed to the constructor function ):

action will be set as options.formOptions.ajaxOptions.url
enctype will be set as options.formOptions.ajaxOptions.headers['Content-Type'] ( not for multipart/form-data where enctype will just allow data transformation to FormData )
method will be set as options.formOptions.ajaxOptions.method

Some notes about field attributes:

data-formjs-question ( optional | empty attribute ) used for visual feedback on valid / invalid / dirty fields ( to be used on a container element of a question ).
Can be changed via questionContainer in Field Options.
name ( required ) used inside "getFormData" method to collect form data.
required mandatory for fields that require an answer.
type ( required ) used for field validation.
data-type ( optional ) by now only "number" is supported. See "strictHtmlValidation" option in Field Options section for details.
data-subtype ( optional ) for custom validations ( eg: VAT number, fiscal code, etc - see the full list ).

Initialize

const $form = document.querySelector('form');
const options = {...};
const formInstance = new Form( $form, options );

$form ( required ) must be a single form node ( not a nodelist! ) or a CSS string selector
options ( optional ) a JS object with fieldOptions and formOptions ( see Options section ).

Thanks to initialization, these will then run automatically ( NOT for Lite version ):

Fields validation: on events defined in options.fieldOptions.validateOnEvents ( see Field Options section )
Form submit: on submit event, if form is valid ( form is validated via method validateForm - see Methods section ). By default, for is submitted via ajax with options from options.formOptions.ajaxOptions

You can also access to:

Form version: via Form.prototype.version or $form.formjs.version

See demos