# dara-form

> Dara form validation

Latest version **0.0.12** (published 2024-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install dara-form
pnpm add dara-form
yarn add dara-form
bun add dara-form
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2024-08-08 |
| First published | 2023-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 2.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | darainfo |
| Maintainers | darainfo |
| Keywords | daraValidation, dara-validation, daraForm, dara-form, form, validation, darainfo, javascript |

## Links

- npm: https://www.npmjs.com/package/dara-form
- Repository: https://github.com/darainfo/dara-form
- Issues: https://github.com/darainfo/validation/issues
- npm.io page: https://npm.io/package/dara-form

## Dependencies (7)

- [init](https://npm.io/package/init.md) ^0.1.2
- [preact](https://npm.io/package/preact.md) ^10.13.2
- [tslint](https://npm.io/package/tslint.md) ^6.1.3
- [dara-toast](https://npm.io/package/dara-toast.md) ^0.1.8
- [ink-docstrap](https://npm.io/package/ink-docstrap.md) ^1.3.2
- [dara-datetimepicker](https://npm.io/package/dara-datetimepicker.md) ^0.2.1
- [tslint-config-prettier](https://npm.io/package/tslint-config-prettier.md) ^1.18.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2024-08-08
- 0.0.11 — 2024-03-27
- 0.0.9 — 2024-03-14
- 0.0.8 — 2024-01-31
- 0.0.7 — 2024-01-30
- 0.0.6 — 2023-11-07
- 0.0.5 — 2023-10-17
- 0.0.4 — 2023-10-16
- 0.0.3 — 2023-10-16
- 0.0.2 — 2023-10-13
- 0.0.1 — 2023-10-13

## README

# DaraForm
JavaScript form creation library

[![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/darainfo/dara-form/blob/main/LICENSE)
[![npm version](https://badge.fury.io/js/dara-form.svg)](https://img.shields.io/npm/v/dara-form)
![npm](https://img.shields.io/npm/dt/dara-form)
[![minzipped size](https://img.shields.io/bundlephobia/minzip/dara-form)](https://bundlephobia.com/package/dara-form)


## Browser Support

![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png)  
--- | --- | --- | --- | --- |  
Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |  


1. Install

```sh
yarn install
# OR
npm install
```

2. Run

```sh
npm start
```

3. Open `http://localhost:8889` in your browser


# 사용방법
```
const form = new DaraForm("#loginForm", {
    message: "This value is not valid",
     style: {
      position: 'top-left',
      labelWidth: '3'

    },
    // form load 이후 호출. 
    onMounted: function () {
      console.log(this)
    },
    message: {
      empty: "{name} 필수 입력사항입니다.",
      string: {
        minLength: "{size} 글자 이상 입력해야합니다.",
        maxLength: "{size} 글자 이상 입력할 수 없습니다.",
      },
      number: {
        minimum: "{size} 보다 커야 합니다",
        miximum: "{size} 보다 커야 합니다",
      },
      regexp: {
        email: "이메일이 유효하지 않습니다.",
        url: "URL이 유효하지 않습니다.",
      },
    },
    fields: [
      {
        name: "uid",
        label: "아이디",
        tooltip: "아이디를 넣어주세요.",
        placeholder: "아이디를 넣어주세요.",
        renderType: "text",
      }
      , {
        name: "password",
        label: "패스워드",
        description: "비밀번호는 대문자 소문자 포함입니다.",
        placeholder: "패스워드를 입력하세요",
        renderType: "password",
      }
    ]
  });
```
  

# Form 옵션
| key | 설명 | 기본값 | 옵션값 |
|-----|------|-----|-----|
| style |  width: form 넓이<br> labelWidth : label 넓이 <br> valueWidth : value width<br> position : '"[label위치]"-[글자 정렬위치]' <br> -- ex) 'top-left','left-right' |  width: "100%" <br>  labelWidth: 3<br> valueWidth: 9<br> position: "left-right" | position : top,left,right - left,center,right |
| autoFocus |  포커스 여부 |  true | true , false |
| notValidMessage |   폼 유효하지 않을때 메시지 |   'This value is not valid'  | |
| onMounted |  폼 로드후 이벤트 |  |  |
| fields |  폼필드 [설명](#field-option) | | |
| message |  폼 유효성 체크 메시지 [설명](#form-message) |  | 
| useTypeValue | form에 값을 renderer type별로 값을 구 할지 여부. renderType tab 값을 구할때 영향이 있음 |  | 


# Form message
```javascript
required:  '{name} 필수 입력사항입니다.'
string: {
  minLength: '{size} 글자 이상 입력해야합니다.'
  maxLength: '{size} 글자 이상 입력할 수 없습니다.'
};
number: {
  min: '{size} 보다 커야 합니다'
  max: '{size} 보다 커야 합니다'
};
type: {
  message: '{type} 유효하지 않습니다.'
};
```

# Field Option
| key | 설명 | 기본값 | 옵션값 |
|-----|------|-----|-----|
| name |  field name |   |  |
| label |  label |   |  |
| tooltip |  툴팁문구 |   |  |
| disabled |  비활성화 여부 |   |  |
| placeholder |  placeholder |   |  |
| orientation |  차식 field 가 있을경우 방향 | vertical  | horizontal, vertical |
| required |  필수 여부 |   |  |
| regexpType |  정규식 타입 |   | email, url, alpha, alpha-num |
| template | custom value 템플릿 |   |  |
| listItem |  dropdown, radio, checkbox 옵션값 |   |  |
| description |  설명 | labelField: label key <br> valueField: value key<br>  list: 옵션 리스트<br>
  orientation: 방향  |  |
| children | 자식 field 리스트 |   |  |
| onChange | 입력값 변경시 호출되는 메소드 |   |  |
| onClick | button 타입 클릭 이벤트 |   |  |
| fileDownload | file 타입일경우 다운로드 메소드 |   |  |
| renderer | custom renderer |   |  |
| conditional | 보이기 여부 조건 | show: 보이기 여부 <br/>  field: field name <br> eq: 비교 값 <br> custom: custom 체크 메소드   |  |
| renderType |  render type  | text  | number, text, file, textarea, dropdown, radio, checkbox, date(dara-datetimepicker모듈 사용), group, custom |
| customOptions |  date 타입등의 추가 module에서 사용하는 추가 옵션 |   |  |
| style |  width: field 넓이<br> labelHide : label 숨김여부 <br> labelWidth : label 넓이<br>  customClass : custom class <br> valueWidth : value width <br> tabAlign : render type이 tab일 경우 정렬 <br> position : '"[label위치]"-[글자 정렬위치]' <br> -- ex) 'top-left','left-right' |  width: "100%" <br>  labelWidth: 3<br> valueWidth: 9<br> position: "left-right" | position : top,left,right - left,center,right <br> tabAlign:left, center, right|
| rule |  유효성 규칙 | minLength: 최소 길이 <br>  maxLength: 최대길이<br> minimum: 최소값 <br>    exclusiveMinimum: 최소값 포함 여부 <br> maximum: 최대값 <br>exclusiveMaximum: 최대값 포함여부 |  |
| different | field 값이 다른지 비교 | field: field name <br> message: 메시지   |  |
| identical | field 값이 같은지 비교 | field: field name <br> message: 메시지   |  |


## License
Darainfo is under [MIT License](./LICENSE).

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