Socket
Book a DemoInstallSign in
Socket

@deleteagency/forms

Package Overview
Dependencies
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@deleteagency/forms

[Live Demo](https://delete-agency.github.io/forms/)

1.0.0
latest
Source
npmnpm
Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

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

FAQs

Package last updated on 25 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.