https://github.com/vitorluizc/mobx-valite-form-store

A MobX form store using `valite` as validator.
https://github.com/vitorluizc/mobx-valite-form-store

form-validate form-validation form-validator mobx mobx-form mobx-store store validator

Last synced: about 2 months ago
JSON representation

A MobX form store using `valite` as validator.

• Host: GitHub
• URL: https://github.com/vitorluizc/mobx-valite-form-store
• Owner: VitorLuizC
• License: mit
• Created: 2018-06-14T20:15:45.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-08-01T22:41:37.000Z (over 6 years ago)
• Last Synced: 2024-09-12T02:19:19.150Z (4 months ago)
• Topics: form-validate, form-validation, form-validator, mobx, mobx-form, mobx-store, store, validator
• Language: JavaScript
• Size: 113 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# MobX `valite` form Store

[![Build Status][2]][1]

A MobX form store using [valite][0] as validator.

## Installation

This module is published under NPM Registry, so you can install using NPM, Yarn and other package managers.

```sh

npm install --save mobx-valite-form-store

# Use the command below if you're using Yarn.

yarn add mobx-valite-form-store

```

## Usage

This module provides a store class to handle form states, validators & their error states.

```js

import React, { Component } from 'react';

import { observer } from 'mobx-react';

import { observable } from 'mobx';

import FormStore from 'mobx-valite-form';

// An validator schema for entries object.

const validators = {

  name: [

    (name) => (typeof name === 'string' && !!name.trim()) || 'Name is a required entry.',

    (name) => (name.length > 2 && name.length < 30) || 'Name should have between 2 and 30 chars.'

  ]

};

@observer

export default class Form extends Component {

  @observable store = new FormStore({ name: '' }, validators);

  onSubmit = async () => {

    await this.store.validateEntries();

    if (!this.store.isValid)

      return;

    this.props.onSave(this.store.entries);

  };

  render () {

    return (

      

         this.store.setEntry('name', e.target.value) }

        />

        { this.store.errors.name && { this.store.errors.name } }

      

    );

  }

}

```

## License

Released under MIT license.

[0]: https://github.com/VitorLuizC/valite

[1]: https://travis-ci.org/VitorLuizC/mobx-valite-form-store

[2]: https://travis-ci.org/VitorLuizC/mobx-valite-form-store.svg?branch=master