All Projects β†’ nosachamos β†’ formalizer

nosachamos / formalizer

Licence: MIT License
React hooks based form validation made for humans.

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to formalizer

React Hook Form
πŸ“‹ React Hooks for form state management and validation (Web + React Native)
Stars: ✭ 24,831 (+206825%)
Mutual labels:  validation, form, form-validation, react-hooks
Usetheform
React library for composing declarative forms, manage their state, handling their validation and much more.
Stars: ✭ 40 (+233.33%)
Mutual labels:  validation, form, form-validation
react-cool-form
😎 πŸ“‹ React hooks for forms state and validation, less code more performant.
Stars: ✭ 246 (+1950%)
Mutual labels:  form, form-validation, react-hooks
Bootstrap Validate
A simple Form Validation Library for Bootstrap 3 and Bootstrap 4 not depending on jQuery.
Stars: ✭ 112 (+833.33%)
Mutual labels:  validation, form, form-validation
Formsy React
A form input builder and validator for React JS
Stars: ✭ 708 (+5800%)
Mutual labels:  validation, form, form-validation
React Final Form
🏁 High performance subscription-based form state management for React
Stars: ✭ 6,781 (+56408.33%)
Mutual labels:  validation, form, form-validation
Legit
input validation framework
Stars: ✭ 81 (+575%)
Mutual labels:  validation, form, form-validation
svelte-form
JSON Schema form for Svelte v3
Stars: ✭ 47 (+291.67%)
Mutual labels:  validation, form, form-validation
Form Validation.js
The most customizable validation framework for JavaScript.
Stars: ✭ 127 (+958.33%)
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 (+1191.67%)
Mutual labels:  validation, form, form-validation
Neoform
βœ… React form state management and validation
Stars: ✭ 162 (+1250%)
Mutual labels:  validation, form, form-validation
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 (+3841.67%)
Mutual labels:  validation, form, form-validation
Resolvers
πŸ“‹ Validation resolvers: Zod, Yup, Joi, Superstruct, and Vest.
Stars: ✭ 222 (+1750%)
Mutual labels:  validation, form, form-validation
Ok
βœ”οΈ A tiny TypeScript library for form validation
Stars: ✭ 34 (+183.33%)
Mutual labels:  validation, form, form-validation
Approvejs
A simple JavaScript validation library that doesn't interfere
Stars: ✭ 336 (+2700%)
Mutual labels:  validation, form, form-validation
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 (+516.67%)
Mutual labels:  validation, form, form-validation
React Form With Constraints
Simple form validation for React
Stars: ✭ 117 (+875%)
Mutual labels:  validation, form, form-validation
Redux Form
A Higher Order Component using react-redux to keep form state in a Redux store
Stars: ✭ 12,597 (+104875%)
Mutual labels:  validation, form, form-validation
ATGValidator
iOS validation framework with form validation support
Stars: ✭ 51 (+325%)
Mutual labels:  form, form-validation, form-validator
antd-react-form-builder
Example
Stars: ✭ 74 (+516.67%)
Mutual labels:  form, form-validation

Build Status codecov

styled with prettier npm Snyk Vulnerabilities for GitHub Repo GitHub

Formalizer is a React Hooks based form validation library made for humans. The cleanest code or your money back ;)

Formalizer

Simple, tiny, extensible, intuitive, documented, fully tested, magical.


Installation

yarn add formalizer

or

npm install formalizer --save

Sample Usage

import { useFormalizer } from 'formalizer';

const UserProfileComponent = () => {
  const { formRef, useInput, errors, isValid } = useFormalizer();

  return (
    <form ref={formRef}>
      <input {...useInput('name', ['isRequired'])} />
      <span>{errors['name']}</span>

      <input {...useInput('email', ['isRequired', 'isEmail'])} />
      <span>{errors['email']}</span>

      <button disabled={!isValid} type="submit">
        Submit
      </button>
    </form>
  );
};

For a complete guide on how each of these pieces work, see our tutorial.

In a Nutshell

Use the useFormalizer hook to gain access to the useInput hook, the errors currently in your form, whether the form is valid or not and more.

Then, use the useInput to setup validations on your form inputs.

Formalizer offers two built in validators out-of-the-box and it integrates with the awesome validator library seamlessly, which means if you install it you can use all of their validators.

But know that writing your own custom validators is super easy.

Also, you may create global validators so that they accessible throughout your app. Doing so helps keep your code DRY and facilitates maintaining it.

Finally, if you use Material UI you may like the fact Formalizer integrates with it. If you use some other UI framework, chances are you can tweak our settings to make it work with it.

Contributing

Contributions are very welcome!

We follow the "fork-and-pull" Git workflow.

  1. Create a Fork and clone it

    Simply click on the β€œfork” button of the repository page on GitHub.

    The standard clone command creates a local git repository from your remote fork on GitHub.

  2. Modify the Code

    In your local clone, modify the code and commit them to your local clone using the git commit command.

    Run yarn test and make sure all tests still pass.

    Run tslint --project . and make sure you get no warnings.

  3. Push your Changes

    Make sure to update affected tests and/or add tests to any new features you may have created.

    We are very careful to make sure coverage does not drop.

  4. Create a Pull Request

    We will review your changes and possibly start a discussion.

    If changes are required, you can simply push these changes into your fork by repeating steps #3 and #4 and the pull request is updated automatically.

License

MIT


Created and maintained by Eduardo Born with ❀ and coffee

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