Simple and lightweight form validation for Svelte with no dependencies.

Overview

Svelidate

Simple and lightweight form validation for Svelte with no dependencies

Installation

// npm
npm install svelidate
// yarn
yarn add svelidate
// pnpm
pnpm add svelidate

Usage

<script lang="ts">
	import { svelidate, string as s, general as g } from "svelidate"

	const form = svelidate({
		email: {
			value: "",
			validators: [
				g.required("This field is required."),
				s.email("Please enter a valid email."),
			],
		},
		password: {
			value: "",
			validators: [
				g.required("This field is required."),
				s.lowerCase("Password needs to have atleast one lower case letter."),
				s.upperCase("Password needs to have atleast one upper case letter."),
				s.number("Password needs to have atleast one number."),
				s.symbol()("Password needs to have one symbol."),
				s.length.gt(6)("Password needs to have more than 6 characters."),
			],
		},
	})

	$form.$on.submit = () => {
		// handle submit...
	}
</script>

<form on:submit={$form.$fn.submit}>
	<div>
		<!-- displaying email errors -->
		<ul>
			{#each $form.email.errors as error}
				<li>{error}</li>
			{/each}
		</ul>

		<input type="text" bind:value={$form.email.value} />
	</div>

	<div>
		<!-- displaying password errors -->
		<ul>
			{#each $form.password.errors as error}
				<li>{error}</li>
			{/each}
		</ul>

		<input type="password" bind:value={$form.password.value} />
	</div>
	<button disabled={$form.$st.invalid}>Submit</button>
</form>

Form

To create a svelidate form just use svelidate(yourFormObject) with an object representing your form, see the form fields section for more information. Svelidate adds 3 top level properties to the initial form, $st for global form state, $fn for form functions and $on to subscribe to a form event.

$st

const $st = {
	invalid: boolean // true if any form field is invalid
	submitted: boolean // true once `$fn.submit` has been called
	initial: Readonly≺Form≻ // the original form passed to `svelidate()` 
}

$fn

const $fn = {
	submit: (e?: SubmitEvent) =>  void // handles submit and then calls `$on.submit`
	reset: () =>  void // resets all the form fields to their initial values
	untouch: () =>  void // resets all the form fields `touched` values to false
	getErrors: () => string[] // returns all the current errors
}

$on

const $on = {
	submit: (e?: SubmitEvent) =>  void // called after submitting with `$fn.submit`
	touch: (key: string) => void // called when an input is touched
}

Form fields

The argument passed to svelidate() is an object having form field names as keys and form fields objects as values. Here are all the available properties a form field object can have (after using svelidate() all of them will exist, undefined ones will be created by the function).

const field = {
	value: T // the value to bind to the input
	validators: FormFieldValidator<T>[] // you can either import them or make your own
	errors: string[] // an array of errors messages returned by the failed validators
	touched: boolean // true if `value` got modified (submitting the form resets it to false)
	invalid: boolean // true if `errors.length` > 0
}

Only value is mandatory when creating a form field. If your form field object is invalid (for example having invalid === false and errors.length > 0) it will be corrected by svelidate().

Validators

Default validators

Svelidate comes with multiple validators that you can use, they are grouped by category (object): general when they can be used for many value types (e.g. required or truthy), string to validate strings, number for numbers and date for dates.

general

const general = {
	truthy, // value is truthy (can be used to validate booleans/checkboxes).
	falsy, // value is falsy (can be used to validate booleans/checkboxes).
	required, // value is truthy or strictly equal to 0.
	eq(value: any), // value is strictly equal to argument.
	neq(value: any), // value is strictly different from argument.
}

string

// value must be a string
const string = {
	email, // value is an e-mail.
	upperCase, // value has atleast one upper case letter.
	lowerCase, // value has atleast one lower case letter.
	number, // value has atleast one number.
	symbol(symbols: string[]), // value has atleast one symbol ( !"#$%&'()*+,-./:;<=>?@[\]^_`{|}~), a custom symbol array can be given.
	regex(regex: RegExp), // value matches the given regex.
	eq(string: string), // value is equal to the given string.
	neq(string: string), // value is different from the given string.,
	length: {
		gt(length: number), // value length is longer than the given length.
		gte(length: number), // value length is longer than or equal to the given length.
		lt(length: number), // value length is shorter than the given length.
		lte(length: number), // value length is shorter than or equal to the given length.
		inside(min: number, max: number), // value length is included in the given range.
		outside(min: number, max: number), // value length is excluded from the given range.
		neq(length: number), // value length is different from the given one.
		eq(length: number), // value length is equal to the given one.
	},
}

number

// value must be a number
const number = {
	gt(number: number), // value is greater than the given number.
	gte(number: number), // value is greater than or equal to the given number.
	lt(number: number), // value is lesser than the given number.
	lte(number: number), // value is lesser than or equal to the given number.
	inside(min: number, max: number), // value is in included in the given interval.
	outside(min: number, max: number), // value is in excluded from the given interval.
	neq(number: number), // value is different from the given number.
	eq(number: number), // value is equal to the given number.
}

date

// value must be a string or a date, if it's a string it will be parsed using the `Date` constructor.
const date = {
	gt(date: Date), // value is after the given date.
	gte(date: Date), // value is after the or is the given date.
	lt(date: Date),  // value is before the given date.
	lte(date: Date), // value is before the or is the given date.
	inside(min: Date, max: Date), // value is between the given date range.
	outside(min: Date, max: Date), // value is outside the given date range.
	neq(date: Date), // value is not the given date.
	eq(date: Date), // value is the given date.
}

Custom validators

You can also create your own validator, a validator takes the binded input value has an argument and returns undefined if there are no errors or a string containing the error message. Because the error message may change (for example if using translation keys), svelidate provide helper functions to create a validator factory that can take custom error messages. These helper functions take, a callback that must return true if the value is valid or false if it's not, and a string for the default error message (optional).

import {
	createValidator,
	createStringValidator, // will return an error if value is not a string.
	createNumberValidator, // will return an error if value is not a number.
	createDateValidator, // will return an error if value is not a date (it will try to parse it as a date first using the `Date` constructor).
} from "svelidate"

//
const isObject = createValidator(
	value => typeof value === "object",
	"This is not an object !"
)

const objectValidator = isObject() // this is what you use in form fields (`isObject()`)
objectValidator({}) // return undefined
objectValidator("string") // returns "This is not an object !"

//
// you can also pass params by wrapping it in another function:
const isNumberEqualTo = (number: number) => {
	return createNumberValidator(value => value === number)
}

const threeValidator = isNumberEqualTo(3)("This is not equal to 3 !")
threeValidator(3) // return undefined
threeValidator(69) // return "This is not equal to 3 !"

Conditional validation

You can make any validator or array of validator only validate if a condition is true/undefined by using the validateIf(predicate: Validator | ValidatorPredicate, validators: Validator | Validator[] ) function.

import { validateIf, general } from "svelidate"

const value = undefined

// if the predicate returns true or undefined the general.required() will be run as normal
validateIf(() => true, general.required("error"))(value) // returns "error"

// else it won't return any errors, even if the value is not valid
validateIf(() => false, general.required("error"))(value) // returns undefined

// validateIf can also be used to validate arrays
validateIf(
	() => false,
	[general.required("error1"), general.truthy("error2")]
).map(validator => validator(value)) // returns [undefined, undefined]

If you want to make a custom validator conditional you can use createConditionalValidator(predicate: Validator | ValidatorPredicate, validator: Validator). Same usage, except it doesn't take arrays.

You might also like...

👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

👌A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for drop an annoying pop-ups confirming the submission of form in your web apps.

Throw out pop-ups confirming the submission of form! A useful zero-dependencies, less than 434 Bytes (gzipped), pure JavaScript & CSS solution for dro

Aug 24, 2022

This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreadsheet.

HtmlFormApp Overview This is a Google Apps Script library for parsing the form object from HTML form and appending the submitted values to the Spreads

Oct 23, 2022

Auth-Form-Design - Beautiful Auth Form Designed using React 🥰.

Auth-Form-Design - Beautiful Auth Form Designed using React 🥰.

🙋 Auth Form Design 🥳 Features 1. Check Your Password Strength 2. Can Use Suggested Password 3. Enjoy Responsive Design Getting Started with Create R

Dec 24, 2022

Gatsby-Formik-contact-form-with-backend-panel - Full working contact form with backend GUI panel.

Gatsby minimal starter 🚀 Quick start Create a Gatsby site. Use the Gatsby CLI to create a new site, specifying the minimal starter. # create a new Ga

Jan 2, 2022

Form To CSS - jQuery-Plugin form to CSS generator

Form To CSS - jQuery-Plugin form to CSS generator

Create your own CSS generator with the form to css generator Builder plugin. Can be usefull to create your own css builder or a Wordpress plugin or any kind of apps you need a real time css generator. For example, you can create a button generator

Sep 26, 2021

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again.

form-storage A JavaScript library stores the form-data to the localstorage so you don't have to fill the form again. Installation via npm npm install

Dec 10, 2022

A lightweight abstraction between Svelte stores and Chrome extension storage.

Svelte Chrome Storage A lightweight abstraction between Svelte stores and Chrome extension storage. This library makes data synchronization of backgro

Nov 15, 2022

A form management library for SolidJS that is very lightweight and simple!

solform A form management library for SolidJS that is very lightweight and simple! Why solform Very easy, fast, lightweight and powerful! It has built

Nov 15, 2022

Zero dependencies, lightweight, and asynchronous https requests package.

Zero dependencies, lightweight, and asynchronous https requests package.

This project is a Work in Progress and currently in development. The API is subject to change without warning. A small fetching package for super simp

Dec 8, 2022
Comments
  • validateIf based on other fields

    validateIf based on other fields

    Hi , I came upon this lib and find it interesting. I want to suggest that either validateIf be extended to take other fields in the form into consideration or introduce a validateWhen , which validates , when conditions based on other fields in the form are met

    opened by joshua1 2
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framework.

Sveltosis Still in development A Svelte parser that compiles to Mitosis JSON, allowing you to write Svelte components once and compile to every framew

sveltosis 70 Nov 24, 2022
A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans.

bootstrap-validate A simple Form Validation Utility for Bootstrap 3, Bootstrap 4, and Bootstrap 5 for Humans. ?? Support us with Developer Merchandise

null 138 Jan 2, 2023
RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be displayed. Try it!

RenderIf RenderIf is a function that receives a validation as a parameter, and if that validation is true, the content passed as children will be disp

Oscar Cornejo Aguila 6 Jul 12, 2022
The jQuery plugin for validation and post form data to server

NiceForm The jQuery plugin for validation and post form data to server (http://ducdhm.github.io/jquery.niceform/) Shortcuts Dependencies Rules Configu

Duc Doan (Bobby) 17 Jul 27, 2022
A robust form library for Lit that enriches input components with easy-to-use data validation features.

EliteForms A robust form library for Lit that enriches input components with easy-to-use data validation features. Installation npm install elite-form

OSLabs Beta 33 Jun 28, 2022
Javascript Library providing form validation helpers

Javascript-Form-Validation Javascript Library providing form validation helpers Table of contents Installation Usage Include Library Use components Co

Benoit Gambier 13 Mar 25, 2022
Composition API & Yup Powered Form Validation

vue-yup-form Composition API & Yup Powered Form Validation. This tiny library allows Vue and Yup to be a best friend. Requirements The following versi

Masaki Koyanagi 12 Dec 26, 2022