mdauner / Sveltejs Forms
Licence: mit
Declarative forms for Svelte
Stars: ✭ 163
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Sveltejs Forms
svelte-form
JSON Schema form for Svelte v3
Stars: ✭ 47 (-71.17%)
Mutual labels: svelte, form, form-validation
Yaaf
Easing the form object pattern in Rails applications
Stars: ✭ 161 (-1.23%)
Mutual labels: hacktoberfest, form-validation, form
Svelte Firebase
A template to help you start developing SPAs with Svelte and Firebase.
Stars: ✭ 111 (-31.9%)
Mutual labels: hacktoberfest, svelte
React Form With Constraints
Simple form validation for React
Stars: ✭ 117 (-28.22%)
Mutual labels: form-validation, form
React Controlled Form
Flexible, Modular & Controlled Forms for React and Redux
Stars: ✭ 121 (-25.77%)
Mutual labels: form-validation, form
Jafar
🌟!(Just another form application renderer)
Stars: ✭ 107 (-34.36%)
Mutual labels: form-validation, form
React Forms
React library for rendering forms.
Stars: ✭ 111 (-31.9%)
Mutual labels: hacktoberfest, form-validation
Vue Form Components
Clean & minimal vue form elements and form builder with validation
Stars: ✭ 120 (-26.38%)
Mutual labels: form-validation, form
Just Validate
Lightweight (~4,5kb gzip) form validation in Javascript Vanilla, without dependencies, with customizable rules (including remote validation), customizable messages and customizable submit form with ajax helper.
Stars: ✭ 74 (-54.6%)
Mutual labels: form-validation, form
Musicplayer
A minimal music player built on electron.
Stars: ✭ 145 (-11.04%)
Mutual labels: hacktoberfest, svelte
Forms
📝 Simple form & survey app for Nextcloud
Stars: ✭ 127 (-22.09%)
Mutual labels: hacktoberfest, form
Formhelper
ASP.NET Core - Transform server-side validations to client-side without writing any javascript code. (Compatible with Fluent Validation)
Stars: ✭ 155 (-4.91%)
Mutual labels: form-validation, form
Formsy Semantic Ui React
Formsy-React wrappers for Semantic-Ui-React's form components
Stars: ✭ 103 (-36.81%)
Mutual labels: form-validation, form
React Native Merlin
🧙 Simple web-like forms in react native.
Stars: ✭ 83 (-49.08%)
Mutual labels: hacktoberfest, form
Bootstrap Validate
A simple Form Validation Library for Bootstrap 3 and Bootstrap 4 not depending on jQuery.
Stars: ✭ 112 (-31.29%)
Mutual labels: form-validation, form
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (-75.46%)
Mutual labels: form-validation, form
Ng Bootstrap Form Validation
An Angular Module for easy data driven (reactive) form validation
Stars: ✭ 57 (-65.03%)
Mutual labels: hacktoberfest, form
Form Validation.js
The most customizable validation framework for JavaScript.
Stars: ✭ 127 (-22.09%)
Mutual labels: form-validation, form
sveltejs-forms
Declarative forms for Svelte.
Features
- optional schema-based validation through Yup
- access to nested properties using paths
- supports custom components
- provides
Input
,Select
,Choice
components to reduce boilerplate
Install
$ npm i sveltejs-forms
or
$ yarn add sveltejs-forms
How to use
Input
, Select
, Choice
helper components
With provided <script>
import { Form, Input, Select, Choice } from 'sveltejs-forms';
import yup from '[email protected]';
function handleSubmit({ detail: { values, setSubmitting, resetForm } }) {
setTimeout(() => {
console.log(values);
setSubmitting(false);
resetForm({
user: { email: '[email protected]' }, // optional
});
}, 2000);
/**
* {
* user: {
* email: '[email protected]'
* },
* password: '123456',
* language: 'svelte',
* os: 'osx,linux'
* }
*/
}
function handleReset() {
console.log('form has been reset');
}
const schema = yup.object().shape({
user: yup.object().shape({
email: yup
.string()
.required()
.email(),
}),
password: yup.string().min(4),
language: yup.string().required(),
os: yup.string(),
});
const langOptions = [
{ id: 'svelte', title: 'Svelte' },
{ id: 'react', title: 'React' },
{ id: 'angular', title: 'Angular' },
];
const osOptions = [
{ id: 'macos', title: 'macOS' },
{ id: 'linux', title: 'Linux 🐧' },
{ id: 'windows', title: 'Windows' },
];
const initialValues = {
language: 'svelte',
};
</script>
<style>
:global(.sveltejs-forms) {
background-color: #f8f8f8;
display: inline-block;
padding: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
}
:global(label) {
font-size: 0.8rem;
color: #888;
margin-bottom: 0.2rem;
}
:global(.message) {
font-size: 0.8rem;
color: #888;
margin: 0.2rem 0;
color: #f56565;
}
:global(input[type='text']),
:global(textarea),
:global(select) {
width: 100%;
background-color: white;
margin: 0;
}
:global(input[type='checkbox'] + label) {
display: inline-block;
margin-right: 2rem;
}
:global(.field) {
margin-bottom: 1rem;
}
button {
border-radius: 5px;
padding: 0.5rem 1rem;
margin-right: 1rem;
color: white;
}
button[type='reset'] {
background-color: #f56565;
}
button[type='submit'] {
background-color: #48bb78;
width: 80px;
}
</style>
<Form
{schema} <!-- optional -->
{initialValues} <!-- optional -->
validateOnBlur={false} <!-- optional, default: true -->
validateOnChange={false} <!-- optional, default: true -->
on:submit={handleSubmit}
on:reset={handleReset}
let:isSubmitting
let:isValid
>
<Input
name="user.email" <!-- nested field -->
label="Email Address"
value="[email protected]" <!-- initial value -->
placeholder="e.g. [email protected]" />
<Input name="password" type="password" placeholder="Password" />
<Select name="language" options={langOptions} />
<Choice
name="os"
options={osOptions}
disabled
multiple />
<button type="reset">Reset</button>
<button type="submit" disabled={isSubmitting}>Sign in</button>
<div>The form is valid: {isValid}</div>
</Form>
With custom component:
<script>
import { Form } from 'sveltejs-forms';
import Select from 'svelte-select';
import yup from '[email protected]';
let svelteSelect;
function handleSubmit({ detail: { values, setSubmitting, resetForm } }) {
setTimeout(() => {
console.log(values);
setSubmitting(false);
svelteSelect.handleClear();
resetForm();
}, 2000);
}
const schema = yup.object().shape({
food: yup.string().required()
});
let items = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'pizza', label: 'Pizza' },
{ value: 'cake', label: 'Cake' },
{ value: 'chips', label: 'Chips' },
{ value: 'ice-cream', label: 'Ice Cream' },
];
</script>
<Form
{schema}
on:submit={handleSubmit}
let:isSubmitting
let:setValue
let:values
let:errors
let:touched>
<Select
{items}
bind:this={svelteSelect}
inputAttributes="{{ name: 'food' }}"
hasError="{touched['food'] && errors['food']}"
on:select="{({ detail }) => setValue('food', detail.value)}"
on:clear="{() => setValue('food', '')}"
selectedValue="{items.find(item => item.value === values['food'])}"/>
<button type="submit" disabled={isSubmitting}>Submit</button>
</Form>
Slot props
Name | Type |
---|---|
isSubmitting | boolean |
isValid | boolean |
setValue(path, value) | function |
touchField(path) | function |
validate() | function |
values | object |
errors | object |
touched | object |
Contributions
All contributions are welcome.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].