- 🔒 TYPE SAFE
- ⚡ Speedy DX
- 👶 Beginner-Friendly
- 🧪 Well-Tested
- 🍃 Ultra Light
- 🧩 Framework-Agnostic
pnpm add just-submitImportant
Don't forget to add a default value for optional fields.
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
});
// Inside form submit event handler
handleSubmit((data) => {
// ^ { fullName: string; age: number; birthday: Date; wantGift: boolean }
});import { createSubmit } from 'just-submit';
const Form = () => {
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
});
return (
<form
onSubmit={handleSubmit((data) => {
// ...
})}
>
<input type="text" name="fullName" required />
<input type="number" name="age" min={0} required />
<input type="date" name="birthday" defaultValue="2005-03-12" />
<input type="checkbox" name="wantGift" />
<button type="submit">SUBMIT</button>
</form>
);
};<script setup lang="ts">
import { createSubmit } from 'just-submit';
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
})((data) => {
// ...
});
</script>
<template>
<form @submit="handleSubmit">
<input type="text" name="fullName" required />
<input type="number" name="age" min="0" required />
<input type="date" name="birthday" value="2005-03-12" />
<input type="checkbox" name="wantGift" />
<button type="submit">SUBMIT</button>
</form>
</template><form>
<input type="text" name="fullName" required />
<input type="number" name="age" min="0" required />
<input type="date" name="birthday" value="2005-03-12" />
<input type="checkbox" name="wantGift" />
<button type="submit">SUBMIT</button>
</form>import { createSubmit } from 'just-submit';
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
});
const form = document.querySelector('form')!;
form.addEventListener(
'submit',
handleSubmit((data) => {
// ...
}),
);<head>
<script src="https://unpkg.com/just-submit"></script>
</head>
<body>
<form>
<input type="text" name="fullName" required />
<input type="number" name="age" min="0" required />
<input type="date" name="birthday" value="2005-03-12" />
<input type="checkbox" name="wantGift" />
<button type="submit">SUBMIT</button>
</form>
<script>
const { createSubmit } = JustSubmit;
const handleSubmit = createSubmit({
fullName: 'string',
age: 'number',
birthday: 'date',
wantGift: 'boolean',
});
const form = document.querySelector('form');
form.addEventListener(
'submit',
handleSubmit((data) => {
// ...
}),
);
</script>
</body>This library can only convert string values from FormData.
For optional fields, add a default value in case they are null in submission.
This library is for simple forms that don't need to be controlled.
If you are working on a complex form, try the libraries here instead.
You probably CAN! The handleSubmit function can be used in any submit event that has preventDefault and currentTarget.
The examples provided include only the frameworks that have passed our tests. If you find this library works with any other framework, please don't hesitate to create a PR for it. We greatly appreciate your contributions and support!
Drawing inspiration and motivation from the following projects:
- react-hook-form (React)
- vorm (Vue)