# ds-forms

> npm install ds-forms

Latest version **1.0.6** (published 2024-01-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install ds-forms
pnpm add ds-forms
yarn add ds-forms
bun add ds-forms
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2024-01-16 |
| First published | 2023-12-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 51.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | mrbuzzyman |

## Links

- npm: https://www.npmjs.com/package/ds-forms
- npm.io page: https://npm.io/package/ds-forms

## Dependencies (7)

- [qs](https://npm.io/package/qs.md) ^6.11.0
- [zlib](https://npm.io/package/zlib.md) ^1.0.5
- [swiper](https://npm.io/package/swiper.md) ^9.1.0
- [effector](https://npm.io/package/effector.md) ^22.4.1
- [js-cookie](https://npm.io/package/js-cookie.md) ^3.0.5
- [routes-js](https://npm.io/package/routes-js.md) ^0.1.8
- [javascript-router](https://npm.io/package/javascript-router.md) ^0.0.5

## Recent versions

- 1.0.6 (latest) — 2024-01-16
- 1.0.5 — 2024-01-16
- 1.0.4 — 2024-01-16
- 1.0.3 — 2023-12-16
- 1.0.2 — 2023-12-16
- 1.0.1 — 2023-12-16
- 1.0.0 — 2023-12-16

## README

# DSForm doc
## Install
    npm install ds-forms

## Description
Script to process form and send request to server in very simple way.

## Basic Field Structure

        <div class="ds-form-field">
            <input type="text">
        </div>

    Script require parent container to put state classes to container instead field itself.

### OLD below
#### Set required fields like this

    <input data-required="1"/>
#### Field with error

    <input data-required="1" class="error"/>
    
#### Form states

    <form class="loading">, <form class="done">
    
#### Error format form server

    { 
        status : "error",
        error_code : "requried", // Required, even if it does not fit error code ins.
        message : "Error message"
    }
    
#### Success

    { 
        status : "success",
        message : "Optional, will override js message"
    }
    
 #### Custom data send to server, which was not in form

    // Use beforeSubmit
    beforeSubmit = function() {
        let inputs = get("inputs");
        inputs.my_custom_field = "My custom field";
    }
    
#### Optional div where all errors and success messages will appear
    <div class="dsform_message"></div>
       
## Init
    let form = new DSForms("my_form_id", {});
# {} related to settings, which are following:

> All settings are optional

### submitUrl
> by default it takes form's action attribute. <form action="/">

    {submitUrl : "/"}

### auto
> script can detect required fields, password fields and check them. Also it can handle errors. Read about later below. By default it is true.

    {auto : false}

### doNotLock
> script can detect required fields, password fields and check them. Also it can handle errors. Read about later below. By default it is true.

    {doNotLock : true}    

#### beforeSubmit
    {beforeSubmit : function() {
        return true; // To continue form submit
        // return false; to break submit
    }
    
    
#### afterSubmit
    {afterSubmit : function(rsp) {
        // rsp - server response
        return true;  // everyting is ok
        // return false; stop automatic reaction to form submit
    }
    
### requestHeaders
    {
        requestHeaders: {
    			  'Accept': 'application/json',
    			  'Content-Type': 'application/json'
    			}
    }

### messages
    {
        messages: {
            "many_errors" : "You did not fill few required fields properly.",
            "password_confirmation" : "Please confirm password by repeating it in second password field",
            "email_validation" : "Email format is invald",
            "success" : "Form was submitted"
    			}
    }

---
_Source: https://npm.io/package/ds-forms · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._