https://github.com/dugalcedo/formellt
Lighweight form handler library for vanilla JavaScript or TypeScript.
https://github.com/dugalcedo/formellt
form form-validation forms html-form html-forms typescript
Last synced: 9 months ago
JSON representation
Lighweight form handler library for vanilla JavaScript or TypeScript.
- Host: GitHub
- URL: https://github.com/dugalcedo/formellt
- Owner: dugalcedo
- Created: 2024-11-19T22:28:55.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-11-20T10:26:40.000Z (about 1 year ago)
- Last Synced: 2025-04-08T11:06:10.564Z (9 months ago)
- Topics: form, form-validation, forms, html-form, html-forms, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/formellt
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Formellt
A class for handling forms. Easily sanitize, validate, and display errors.
## Installation
`npm i formellt`
## Usage
### HTML
```html
Submit
```
### JavaScript
```js
import Formellt from "./index.js"
// ↓ CSS selector or HTMLFormElement
const handler = new Formellt("#signup-form", { // only validator and onSubmit are required in this init object
sanitizer(formData) {
formData.username = formData.username.trim().replaceAll(/\s+/gm, " ")
return formData
},
// ↓ formData if no sanitizer is provided
validator(sanitized, dispatchError) {
if (!formData.username) {
dispatchError("username", "required") // first arg corresponds to the data-error in the spans above
} else if (formData.username.length < 4) {
dispatchError("username", "Must be at least 4 characters.")
}
if (!formData.password) {
dispatchError("password", "required")
} else if (formData.password.length < 8) {
dispatchError("password", "Must be at least 8 characters.")
} else if (formData.password !== formData.password2) {
dispatchError("password", "Passwords musts match.")
}
if (!formData.privacy.checked) {
dispatchError("privacy", "You must read the privacy policy.")
}
},
//// Handling the submission and responses ///
// ↓ same as formData if no sanitizer provided
onSubmit(_e, formData, sanitized) {
// return a response object to trigger the onGoodRes/onBadRes hooks
return fetch("url-goes-here", {
method: "POST",
body: JSON.stringify(sanitized)
})
},
onGoodRes(_res, data) {
console.log(data)
},
onBadRes(res, _data) {
return `Error ${res.status}: ${res.statusText}`
// returned value will render in the element with data-response-error
},
/// Other nifty stuff ///
/*
PROPERTY DATA TYPE DEFAULT
validateOnChange: boolean false
call the sanitizer and validator any time an input changes
validateOnMutate: boolean false
call the sanitizer and validator if the form's DOM subtree changes
validateOnMount: boolean false
call the sanitizer and validator immediately as the form loads
allowInvalid: boolean false
allow onSubmit to be called even if the form has errors
preventSpam: boolean false
prevent submissions if onSubmit is busy
spamErrorMsg: string "Please wait."
message to display in the element with "data-spam-error" if the form is spammed
submitMsg: string "Fix errors."
message to display in the element with "data-response-error"
if the form does not pass the validator and allowInvalid is false
mutationCallback: MutationCallback undefined
if provided, a mutation observer will be defined that listens for
changes in the childList and subtree
*/
})
```
### TypeScript
```ts
import Formellt from "./index.js"
type FormData = {
username: string
password: string
password2: string
privacy: boolean
}
// Optional, defaults to FormData
type Sanitized = {
username: string
password: string
password2: string
privacy: boolean
}
// Optional, defaults to any
type Data = {
token: string
errorMessage: string
}
const handler = new Formellt("#signup-form", {
/*
See JavaScript example above for what the init object should look like
formData in validator, sanitizer, and onSubmit will be the first type
sanitized in onSubmit will be the second type
data in onGoodRes and onBadRes will be the third type
*/
})
```