@deleteagency/forms

Forms

Live Demo

Motivation

TODO

Installation

Use the package manager npm for installation.

$ npm install @deleteagency/forms

Usage

import {Form} from  '@deleteagency/forms';

let formElement1 = document.getElementById('form1');

// Extending with options example
const form1 = new Form(formElement1, {
    submitElement: formElement1.querySelector('button[type="submit"]'),
    errorsSummary: formElement1.querySelector('[data-errors-summary]'),
    onSuccessfulSubmit: (response) => {
        console.log(response);
    },
    onFailedSubmit: (error) => {
        console.error(error);
    },
    errorsSummaryTemplate: (errors) => {
        return `<div class="alert alert-danger" role="alert">${errors.map(error => `<div>${error}</div>`).join()}</div>`;
    },
    parsley: {
        errorClass: 'is-invalid',
        successClass: 'is-valid',
        errorsWrapper: '<div class="invalid-feedback" aria-live="assertive"></div>',
        errorTemplate: '<div></div>',
    },
});

// Extending with inheritance example
class BaseForm extends Form {
    constructor(el, options) {
        options = {
            ...options,
            submitElement: el.querySelector('button[type="submit"]'),
            errorsSummary: el.querySelector('[data-errors-summary]'),
            parsley: {
                errorClass: 'is-invalid',
                successClass: 'is-valid',
                errorsWrapper: '<div class="invalid-feedback" aria-live="assertive"></div>',
                errorTemplate: '<div></div>',
            },
        };
        super(el, options);
    }

    onSuccessfulSubmit(response) {
        console.log(response);
    }

    onFailedSubmit(error) {
        console.error(error);
    }

    errorsSummaryTemplate(errors) {
        return `<div class="alert alert-danger" role="alert">${errors.map(error => `<div>${error}</div>`).join()}</div>`;
    }
}

let formElement2 = document.getElementById('form2');
const form2 = new BaseForm(formElement2);

API

new Form(element, options = {})

element

Required
Type: HTMLFormElement

options

Optional
Type: Object

Options

async

Type: boolean
Default: true

Should form be submitted via XHR (axios) or natively.

errorsSummaryElement

Type: HTMLElement
Default: null

todo

submitElement

Type: HTMLElement
Default: null

todo

axiosInstance

Type: Axios
Default: require('axios')

todo

formControlAttribute

Type: string
Default: data-form-control

todo

formControlAttributeCustom

Type: string
Default: data-form-control-name

todo

validateAlwaysAttribute

Type: string
Default: data-validate-always

todo

parsley

Type: Parsley settings
Default: { errorClass: 'is-invalid', successClass: 'is-valid', errorsWrapper: '<ul aria-live="assertive"></ul>', errorTemplate: '<li></li>', }

todo

extractValidationErrors (inheritable)

Type: Function

todo

errorsSummaryTemplate (inheritable)

Type: Function

todo

beforeSubmitPromise (inheritable)

Type: Function

tod

onBeforeSubmit (inheritable)

Type: Function

todo

onAfterSubmit (inheritable)

Type: Function

todo

onSuccessfulSubmit (inheritable)

Type: Function

todo

onFailedSubmit (inheritable)

Type: Function

todo

onError (inheritable)

Type: Function

todo

License

MIT