All Projects → FelixRilling → Ok

FelixRilling / Ok

Licence: mit
✔️ A tiny TypeScript library for form validation

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Ok

Approvejs
A simple JavaScript validation library that doesn't interfere
Stars: ✭ 336 (+888.24%)
Mutual labels:  validation, form-validation, form
React Hook Form
📋 React Hooks for form state management and validation (Web + React Native)
Stars: ✭ 24,831 (+72932.35%)
Mutual labels:  validation, form-validation, form
React Form With Constraints
Simple form validation for React
Stars: ✭ 117 (+244.12%)
Mutual labels:  validation, form-validation, form
Legit
input validation framework
Stars: ✭ 81 (+138.24%)
Mutual labels:  validation, form-validation, form
Redux Form
A Higher Order Component using react-redux to keep form state in a Redux store
Stars: ✭ 12,597 (+36950%)
Mutual labels:  validation, form-validation, form
Bootstrap Validate
A simple Form Validation Library for Bootstrap 3 and Bootstrap 4 not depending on jQuery.
Stars: ✭ 112 (+229.41%)
Mutual labels:  validation, form-validation, form
Bunny
BunnyJS - Lightweight native (vanilla) JavaScript (JS) and ECMAScript 6 (ES6) browser library, package of small stand-alone components without dependencies: FormData, upload, image preview, HTML5 validation, Autocomplete, Dropdown, Calendar, Datepicker, Ajax, Datatable, Pagination, URL, Template engine, Element positioning, smooth scrolling, routing, inversion of control and more. Simple syntax and architecture. Next generation jQuery and front-end framework. Documentation and examples available.
Stars: ✭ 473 (+1291.18%)
Mutual labels:  validation, form-validation, form
Form Validation.js
The most customizable validation framework for JavaScript.
Stars: ✭ 127 (+273.53%)
Mutual labels:  validation, form-validation, form
Formsy React
A form input builder and validator for React JS
Stars: ✭ 708 (+1982.35%)
Mutual labels:  validation, form-validation, form
Neoform
✅ React form state management and validation
Stars: ✭ 162 (+376.47%)
Mutual labels:  validation, 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 (+117.65%)
Mutual labels:  validation, form-validation, form
React Final Form
🏁 High performance subscription-based form state management for React
Stars: ✭ 6,781 (+19844.12%)
Mutual labels:  validation, form-validation, form
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (+17.65%)
Mutual labels:  validation, form-validation, form
svelte-form
JSON Schema form for Svelte v3
Stars: ✭ 47 (+38.24%)
Mutual labels:  validation, form, form-validation
Formhelper
ASP.NET Core - Transform server-side validations to client-side without writing any javascript code. (Compatible with Fluent Validation)
Stars: ✭ 155 (+355.88%)
Mutual labels:  validation, form-validation, form
Resolvers
📋 Validation resolvers: Zod, Yup, Joi, Superstruct, and Vest.
Stars: ✭ 222 (+552.94%)
Mutual labels:  validation, form-validation, form
formalizer
React hooks based form validation made for humans.
Stars: ✭ 12 (-64.71%)
Mutual labels:  validation, form, form-validation
grav-plugin-form
Grav Form Plugin
Stars: ✭ 48 (+41.18%)
Mutual labels:  form, form-validation
dropzone-ui-react
The most complete React Library Component for drag’n’drop files. Image and video previews. File validation. Multilanguage. Server side support.
Stars: ✭ 122 (+258.82%)
Mutual labels:  form, form-validation
Formvuelar
Vue form components with server-side validation in mind
Stars: ✭ 263 (+673.53%)
Mutual labels:  form-validation, form

OkJS

A super tiny TypeScript library for form validation

Introduction

Ok is an very small utility library to validate forms with more than what HTML5 offers you. Features include customized messages and validator chaining.

Docs

Usage

npm install okjs --save

Syntax

import {Ok} from "okjs";

/**
 * Create Ok instance with custom validators
 */
const ok = new Ok({
    nameFirst: {
        msg: "Only 'Dave' allowed",
        fn: val => val === "Dave"
    },
    emailDe: {
        msg: (val) => `Please input your .de email (You entered '${val}')`,
        fn: (val, element, e) => val.endsWith(".de")
    }
});

/**
 * Bind validation event handlers to inputs
 */
ok.bind(document.querySelector("#inputNameFirst"));
ok.bind(document.querySelector("#inputMail"));

The validator which will be used is defined in the DOM via data-attributes:

<form class="form">
    <div>
        <label>First Name (only "Dave" allowed)</label>
        <input type="text" required data-ok="nameFirst">
    </div>
    <div>
        <label>Last Name (not validated, anything goes)</label>
        <input type="text" required>
    </div>
    <div>
        <label>Email address (only ".de" allowed)</label>
        <input type="email" required data-ok="emailDe">
    </div>
    <input type="submit">
</form>

the name defined in data-ok is the key of the methods object defined in the JS. if the given fn evaluates to false, the input will be marked as invalid.

Validation

Once the user inputs on a field bound by Ok.js, the validator function will be run. If it evaluates to true, the field is valid. If it evaluates falsy, the field will be marked as invalid with the class "invalid" and the JS validity will be updated (which will show a popup containing the validator message, based on the browser).

Chaining

Multiple validators can be used for a single field in a given order by chaining them. to chain multiple validators, simply add a comma between their keys in the ok attribute. When using chaining, the field will only be considered valid if all validators succeed.

<div class="form-group">
    <label for="exampleInputEmail">Email ID (all caps and ending in .de)</label>
    <input type="email" required data-ok="nameCaps, emailDe">
</div>
import {Ok} from "okjs";

const ok = new Ok({
    nameCaps: {
        msg: "Must be in all caps",
        fn: val => val.toUpperCase() === val
    },
    emailDe: {
        msg: "Must end with '.de'",
        fn: val => /.+\.de$/i.test(val)
    }
});

Options

Ok currently only has one option, the class to use for invalid elements.

import {Ok} from "okjs";

// The default invalid class('invalid') will be used
new Ok({});

// 'myClass' will be used for invalid fields
new Ok({}, "myClass");

// no class will be used for invalid fields
new Ok({}, false);

Legacy Browsers

For browsers not supporting the HTML5 Validation API (https://caniuse.com/#feat=form-validation), ok.js will still work, but the validation message will not be shown.

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].