https://github.com/rancoud/form.js
JS Form Manager
https://github.com/rancoud/form.js
Last synced: 11 months ago
JSON representation
JS Form Manager
- Host: GitHub
- URL: https://github.com/rancoud/form.js
- Owner: rancoud
- License: mit
- Created: 2021-12-05T16:02:46.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2025-02-26T13:48:06.000Z (11 months ago)
- Last Synced: 2025-02-26T19:44:30.875Z (11 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.3 MB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# form.js
[](https://github.com/rancoud/form.js/actions/workflows/test.yml)
[](https://codecov.io/gh/rancoud/form.js)
JS Form Manager take care of your forms by validating inputs, use feedbacks and add accessibility.
## Installation
You need to download the js file from `dist` folder, then you can include it in your HTML at the end of your body.
```html
```
Then it automatically scan all `form` tag and `addEventListener` on them.
```js
var forms = document.querySelectorAll("form");
var idxNodes = 0;
var maxNodes = forms.length;
for (; idxNodes < maxNodes; ++idxNodes) {
new Form(forms[idxNodes]);
}
```
## How to use it?
### Form already done
For example you have a form for login.
```html
Username
Password
```
As you can see, no need of javascript if your form is already in your HTML DOM.
### Form appended later
But if your form is appended later
```html
```
You can use
```js
new Form(document.getElementById('my-form'));
```
### Explanations
When submitting a form or updating an input the Form Manager will check all `data-form-rules`.
If a rule failed, it will:
1. block the form's submit
2. add class `form__input--error` to the failed input
3. add label with the error message associated to the failed rule
4. also add `aria-labelledby` with label and label error
5. update the attribute `aria-invalid`
6. if there is a `form__feedback` next to input it will be updated with `form__feedback--error`
## Rules available
* `aria_invalid`: check the aria-invalid attribute is set to false
* `callback:functionName`: use function given, you can also set arguments
* `checked`: verify if the checkbox / radio is checked
* `email`: check if the input is a valid email (the test is to check if there is an @ inside)
* `equal_field:elem_id`: check if the other input (by giving the id) has equal value
* `max:x`: check if the length of the value is x length maximal (not include)
* `min:x`: check if the length of the value is x length minimal (not include)
* `regex:regex`: use regex to validate the input
* `required`: check if the input has value
### Rules errors messages
For each rules you can define a specific error message using this pattern `data-form-error-RULE`
### Rules combined
You can combined rules, they will be check in order from left to right.
For example you can have:
* required
* max 12 length
* use regex `^[a-z]*`
* checkValidate(input, callback)
```html
```
## Feedbacks
You can add this html next to your input
```html
```
According to the rules, it will add the corresponding class `form__feedback--error`, `form__feedback--success`, `form__feedback--loading` to the sibling `form__feedback`.
## Popin
Sometimes form need a popin
## CSS classes used
* `form__input--error`
* `form__input--success`
* `form__container--error`
* `form__container--success`
* `form__feedback--error`
* `form__feedback--success`
* `form__feedback--loading`
* `form__fieldset--error`
* `form__fieldset--success`
* `form__label`
* `form__label--error`
* `form__fake-file-label`
## FormHelper functions
`elemID` is the id of the input you can select with `document.getElementById()`
* setFieldNeutral(elemID: string)
* setFieldValid(elemID: string)
* setFieldInvalid(elemID: string, errorMessage: string)
* setFieldLoading(elemID: string)
* removeGeneralError(elemID: string)
* setGeneralError(elemID: string, title: string, listErrors: array)
* tryFieldIsInvalid(elemID: string, rulesText: string, callback: function)
## Data Form Attributes
### Form
* `data-form-speak-error="error message for screen reader"`
* `data-form-confirm-callback`
* `data-form-general-error="Form is incorrect"`
* `data-form-confirm-question="question?"`
* `data-form-confirm-yes="yes"`
* `data-form-confirm-no="no"`
### Div
* `data-form-has-container`
### Input
* `data-form-rules="rule1|rule2"`
* `data-form-error-aria_invalid="error message"`
* `data-form-error-callback="error message"`
* `data-form-error-checked="error message"`
* `data-form-error-email="error message"`
* `data-form-error-equal_field="error message"`
* `data-form-error-max="error message"`
* `data-form-error-min="error message"`
* `data-form-error-regex="error message"`
* `data-form-error-required="error message"`
## Demo
You can check the [demo](./demo/index.html) for all possibilites in action.
## How to Dev
`npm test` or `docker buildx bake test` to test and coverage
`npm run build` or `docker buildx bake build` to create dist js file minified
`npm run jsdoc` or `docker buildx bake jsdoc` to generate documentation
`npm run eslint` or `docker buildx bake lint` to run eslint
`npm run eslint:fix` to run eslint and fix files